feat(leaflet): add marker
This commit is contained in:
parent
69b304a03e
commit
df3c4eedda
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 172.83 143.31" style="enable-background:new 0 0 172.83 143.31;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#4E4697;}
|
||||
</style>
|
||||
<path class="st0" d="M159.98,95.78c-1.95-4.54-5.55-8.69-10.82-12.47c-1.88-1.34-4.64-2.92-8.28-4.8c4.58-2.89,7.92-5.35,9.99-7.37
|
||||
c3.94-3.77,6.51-7.74,7.72-11.91c1.23-4.21,1.18-8.44-0.14-12.8c-0.73-2.39-1.8-4.62-3.2-6.65l-1.6-2.07
|
||||
c-1.01-1.21-2.16-2.31-3.45-3.37c-4.04-3.29-9.07-5.2-15.09-5.73c-5.9-0.51-12.07,0.17-18.51,2.07c-0.05,0-0.06,0.02-0.11,0.02
|
||||
c-0.06,0.03-0.14,0.05-0.2,0.07c-3.81,1.17-7.61,2.64-11.07,4.39c-3.05,1.55-5.86,3.26-8.13,5.11l0.02,0.07h-0.02v82.31
|
||||
c5.55,3.8,12.43,7.3,21.44,9.12c7.12,1.45,13.78,1.5,19.98,0.13c5.33-1.17,9.82-3.27,13.48-6.35c0.62-0.48,1.22-1.03,1.79-1.58
|
||||
c3.28-3.24,5.55-6.89,6.83-10.96c0.29-0.86,0.52-1.73,0.71-2.64C162.38,105.2,161.92,100.33,159.98,95.78z M109.63,45.63
|
||||
c1.82-0.9,3.78-1.7,5.75-2.42c0.04-0.02,0.08-0.04,0.12-0.04l3.6-1.2c0.07-0.03,0.13-0.05,0.19-0.05
|
||||
c7.71-2.32,13.73-2.64,18.11-0.97c2.76,1.06,4.87,2.56,6.37,4.48c0.9,1.15,1.56,2.46,2,3.93c1.05,3.39,0.61,6.56-1.23,9.51
|
||||
c-0.5,0.81-1.4,2.15-2.13,2.93c-1.7,2.07-5.03,4.64-8.28,6.65c-2.34,1.45-4.91,2.64-7.57,3.36c-0.01,0.01-1.41,0.34-1.41,0.34
|
||||
c-2.18,0.63-8.53,0.69-15.52,0.66V45.63z M148.38,108.82c-0.55,2.75-1.87,5.12-3.93,7.13c-0.19,0.2-0.39,0.39-0.59,0.57
|
||||
c-2.38,2.15-5.67,3.56-9.81,4.23c-4.15,0.66-8.75,0.48-13.78-0.55c-2.7-0.55-6.72-2.19-10.64-4.08V83.79
|
||||
c3.96-0.09,7.5-0.15,10.71,0.1h0.07c0.39,0,0.77,0.01,1.16,0.04c2.67,0.17,5.38,0.86,7.98,1.89c0.01-0.01,0.02,0,0.04,0.01
|
||||
c4.37,1.72,8.56,4.3,11.54,7c2.27,1.97,4.48,4.53,5.78,6.81c0.15,0.23,0.28,0.46,0.4,0.7C148.65,102.96,149.01,105.81,148.38,108.82
|
||||
z"/>
|
||||
<ellipse transform="matrix(0.9347 -0.3553 0.3553 0.9347 0.6343 30.8075)" class="st0" cx="84.18" cy="13.68" rx="8.33" ry="8.33"/>
|
||||
<path class="st0" d="M91.15,38.16v84.61c0,5.54-3.12,10.04-6.97,10.04s-6.97-4.5-6.97-10.04V38.16c0-5.54,3.12-10.04,6.97-10.04
|
||||
S91.15,32.62,91.15,38.16z"/>
|
||||
<path class="st0" d="M23.43,49.65c-1.03,3.43-0.62,6.63,1.24,9.61c1.82,2.96,7.61,7.21,17.38,12.72
|
||||
c9.78,5.51,16.35,9.73,19.72,12.66c4.9,4.28,8.11,8.8,9.63,13.55c1.52,4.75,1.52,9.68-0.02,14.8c-1.52,5.08-4.44,9.41-8.75,13
|
||||
c-4.32,3.59-9.63,5.77-15.93,6.58c-6.3,0.81-12.93,0.14-19.88-1.98c-8.31-2.53-14.39-6.55-19.42-10.64
|
||||
c-0.05-0.04-0.1-0.08-0.15-0.12c-0.25-0.2-0.5-0.4-0.74-0.6c-3.26-2.86-4.49-6.86-2.71-9.32c1.93-2.67,6.77-2.28,10.6,0.38
|
||||
c0.38,0.3,1.87,1.47,2.52,1.94c3.71,2.71,8.45,5.56,12.7,6.85c4.91,1.5,9.47,2.11,13.66,1.82c4.19-0.29,7.58-1.4,10.17-3.34
|
||||
c2.58-1.93,4.32-4.37,5.2-7.33c0.9-2.99,0.8-5.87-0.3-8.66c-1.1-2.77-3.46-5.54-7.07-8.3c-2.32-1.79-7.63-5.1-15.94-9.93
|
||||
c-8.31-4.84-13.98-8.73-17-11.69c-3.93-3.8-6.51-7.82-7.73-12.05c-1.22-4.23-1.17-8.54,0.15-12.92c1.44-4.82,4.19-8.89,8.23-12.23
|
||||
c4.05-3.34,9.07-5.27,15.08-5.8c6.01-0.54,12.4-0.16,18.84,2.19c4.28,1.56,6.41,2.42,8.33,3.25c1.12,0.48,3.12,1.27,4.82,1.98
|
||||
c0.22,0.09,0.98,0.41,1.06,0.45c4.23,1.95,6.71,5.58,5.59,8.25c-1.09,2.57-5.18,3.34-9.37,1.83c-0.05-0.02-0.11-0.04-0.17-0.06
|
||||
c-3.65-1.15-5.71-2.17-13.07-4.42c-7.79-2.37-13.89-2.7-18.29-0.99C27.41,42.87,24.61,45.7,23.43,49.65z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 172.83 143.31" style="enable-background:new 0 0 172.83 143.31;" xml:space="preserve">
|
||||
<path d="M159.98,95.78c-1.95-4.54-5.55-8.69-10.82-12.47c-1.88-1.34-4.64-2.92-8.28-4.8c4.58-2.89,7.92-5.35,9.99-7.37
|
||||
c3.94-3.77,6.51-7.74,7.72-11.91c1.23-4.21,1.18-8.44-0.14-12.8c-0.73-2.39-1.8-4.62-3.2-6.65l-1.6-2.07
|
||||
c-1.01-1.21-2.16-2.31-3.45-3.37c-4.04-3.29-9.07-5.2-15.09-5.73c-5.9-0.51-12.07,0.17-18.51,2.07c-0.05,0-0.06,0.02-0.11,0.02
|
||||
c-0.06,0.03-0.14,0.05-0.2,0.07c-3.81,1.17-7.61,2.64-11.07,4.39c-3.05,1.55-5.86,3.26-8.13,5.11l0.02,0.07h-0.02v82.31
|
||||
c5.55,3.8,12.43,7.3,21.44,9.12c7.12,1.45,13.78,1.5,19.98,0.13c5.33-1.17,9.82-3.27,13.48-6.35c0.62-0.48,1.22-1.03,1.79-1.58
|
||||
c3.28-3.24,5.55-6.89,6.83-10.96c0.29-0.86,0.52-1.73,0.71-2.64C162.38,105.2,161.92,100.33,159.98,95.78z M109.63,45.63
|
||||
c1.82-0.9,3.78-1.7,5.75-2.42c0.04-0.02,0.08-0.04,0.12-0.04l3.6-1.2c0.07-0.03,0.13-0.05,0.19-0.05
|
||||
c7.71-2.32,13.73-2.64,18.11-0.97c2.76,1.06,4.87,2.56,6.37,4.48c0.9,1.15,1.56,2.46,2,3.93c1.05,3.39,0.61,6.56-1.23,9.51
|
||||
c-0.5,0.81-1.4,2.15-2.13,2.93c-1.7,2.07-5.03,4.64-8.28,6.65c-2.34,1.45-4.91,2.64-7.57,3.36c-0.01,0.01-1.41,0.34-1.41,0.34
|
||||
c-2.18,0.63-8.53,0.69-15.52,0.66V45.63z M148.38,108.82c-0.55,2.75-1.87,5.12-3.93,7.13c-0.19,0.2-0.39,0.39-0.59,0.57
|
||||
c-2.38,2.15-5.67,3.56-9.81,4.23c-4.15,0.66-8.75,0.48-13.78-0.55c-2.7-0.55-6.72-2.19-10.64-4.08V83.79
|
||||
c3.96-0.09,7.5-0.15,10.71,0.1h0.07c0.39,0,0.77,0.01,1.16,0.04c2.67,0.17,5.38,0.86,7.98,1.89c0.01-0.01,0.02,0,0.04,0.01
|
||||
c4.37,1.72,8.56,4.3,11.54,7c2.27,1.97,4.48,4.53,5.78,6.81c0.15,0.23,0.28,0.46,0.4,0.7C148.65,102.96,149.01,105.81,148.38,108.82
|
||||
z"/>
|
||||
<ellipse transform="matrix(0.9347 -0.3553 0.3553 0.9347 0.6343 30.8075)" cx="84.18" cy="13.68" rx="8.33" ry="8.33"/>
|
||||
<path d="M91.15,38.16v84.61c0,5.54-3.12,10.04-6.97,10.04s-6.97-4.5-6.97-10.04V38.16c0-5.54,3.12-10.04,6.97-10.04
|
||||
S91.15,32.62,91.15,38.16z"/>
|
||||
<path d="M23.43,49.65c-1.03,3.43-0.62,6.63,1.24,9.61c1.82,2.96,7.61,7.21,17.38,12.72c9.78,5.51,16.35,9.73,19.72,12.66
|
||||
c4.9,4.28,8.11,8.8,9.63,13.55c1.52,4.75,1.52,9.68-0.02,14.8c-1.52,5.08-4.44,9.41-8.75,13c-4.32,3.59-9.63,5.77-15.93,6.58
|
||||
c-6.3,0.81-12.93,0.14-19.88-1.98c-8.31-2.53-14.39-6.55-19.42-10.64c-0.05-0.04-0.1-0.08-0.15-0.12c-0.25-0.2-0.5-0.4-0.74-0.6
|
||||
c-3.26-2.86-4.49-6.86-2.71-9.32c1.93-2.67,6.77-2.28,10.6,0.38c0.38,0.3,1.87,1.47,2.52,1.94c3.71,2.71,8.45,5.56,12.7,6.85
|
||||
c4.91,1.5,9.47,2.11,13.66,1.82c4.19-0.29,7.58-1.4,10.17-3.34c2.58-1.93,4.32-4.37,5.2-7.33c0.9-2.99,0.8-5.87-0.3-8.66
|
||||
c-1.1-2.77-3.46-5.54-7.07-8.3c-2.32-1.79-7.63-5.1-15.94-9.93c-8.31-4.84-13.98-8.73-17-11.69c-3.93-3.8-6.51-7.82-7.73-12.05
|
||||
c-1.22-4.23-1.17-8.54,0.15-12.92c1.44-4.82,4.19-8.89,8.23-12.23c4.05-3.34,9.07-5.27,15.08-5.8c6.01-0.54,12.4-0.16,18.84,2.19
|
||||
c4.28,1.56,6.41,2.42,8.33,3.25c1.12,0.48,3.12,1.27,4.82,1.98c0.22,0.09,0.98,0.41,1.06,0.45c4.23,1.95,6.71,5.58,5.59,8.25
|
||||
c-1.09,2.57-5.18,3.34-9.37,1.83c-0.05-0.02-0.11-0.04-0.17-0.06c-3.65-1.15-5.71-2.17-13.07-4.42c-7.79-2.37-13.89-2.7-18.29-0.99
|
||||
C27.41,42.87,24.61,45.7,23.43,49.65z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
import L from 'leaflet';
|
||||
const iconBFlyBlack = new L.Icon({
|
||||
iconUrl: require('../../assets/Logo_SIB_schwarz.svg');
|
||||
iconAnchor: null,
|
||||
popupAnchor: null,
|
||||
shadowUrl: null,
|
||||
shadowSize: null,
|
||||
shadowAnchor: null,
|
||||
iconSize: new L.Point(60, 75),
|
||||
className: 'leaflet-div-icon'
|
||||
});
|
||||
|
||||
export { iconBFlyBlack };
|
||||
|
|
@ -1,18 +1,37 @@
|
|||
import React from 'react';
|
||||
import { MapContainer, TileLayer } from 'react-leaflet'
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
|
||||
/*JS module import (vs cdn or style link)*/
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
/*set up the height of .leaflet-container
|
||||
*/import '../../style.css';
|
||||
/**/
|
||||
import { getRequiredSVGPinByCategory } from './pin-by-category';
|
||||
/**/
|
||||
import BoatMarker from './marker-boat';
|
||||
/**/
|
||||
/*TODO add SVG loader
|
||||
import MarkerBFly from './marker-butterfly';
|
||||
*/
|
||||
const Map = () => {
|
||||
const position = [51.505, -0.09]
|
||||
const positionP = [51.504, -0.09]
|
||||
return (
|
||||
<>
|
||||
<h2>Map</h2>
|
||||
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
||||
<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker
|
||||
position={positionP}
|
||||
icon={getRequiredSVGPinByCategory('motorcycle',{fill:'orange'})}>
|
||||
<Popup>
|
||||
Popup
|
||||
</Popup>
|
||||
</Marker>
|
||||
<BoatMarker/>
|
||||
{/*TODO add SVG loader <MarkerBFly/>*/}
|
||||
</MapContainer>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import React from "react";
|
||||
import {Marker, Popup } from 'react-leaflet'
|
||||
import L from 'leaflet';
|
||||
export default function BoatMarker(props) {
|
||||
const Red_MARKER = `data:image/svg+xml;utf8,${encodeURIComponent(`<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.059" height="36.059" viewBox="0 0 36.059 36.059" style="transform:rotate(${0}deg)">
|
||||
<defs>
|
||||
<filter id="Path_10080" x="0" y="0" width="36.059" height="36.059" filterUnits="userSpaceOnUse">
|
||||
<feOffset input="SourceAlpha"/>
|
||||
<feGaussianBlur stdDeviation="2.5" result="blur"/>
|
||||
<feFlood flood-opacity="0.161"/>
|
||||
<feComposite operator="in" in2="blur"/>
|
||||
<feComposite in="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Group_8038" data-name="Group 8038" transform="translate(5719.5 1106.5)">
|
||||
<rect id="Rectangle_2670" data-name="Rectangle 2670" width="21" height="21" transform="translate(-5712 -1099)" fill="none"/>
|
||||
<g transform="matrix(1, 0, 0, 1, -5719.5, -1106.5)" filter="url(#Path_10080)">
|
||||
<path id="Path_10080-2" data-name="Path 10080" d="M15.4,12.766a6.414,6.414,0,0,0,1.781-5.634l-.446-2.55-2.55-.446A6.414,6.414,0,0,0,8.553,5.916L6.746,7.723c.234-.232-.845.866-.626.626l-2.96,2.96a2.644,2.644,0,0,0,0,3.735l3.114,3.114a2.644,2.644,0,0,0,3.735,0l2.96-2.96Z" transform="translate(19.2 2.96) rotate(45)" fill="${"red"}"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
`)}`;
|
||||
const positionM = [51.506, -0.09]
|
||||
|
||||
const iconBoat = L.icon({
|
||||
iconUrl: Red_MARKER,
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [12, 12],
|
||||
popupAnchor: [0, 0],
|
||||
});
|
||||
|
||||
return (
|
||||
<Marker
|
||||
position={positionM}
|
||||
icon={iconBoat}
|
||||
>
|
||||
<Popup>
|
||||
Popup
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
import {Marker, Popup} from 'react-leaflet'
|
||||
import L from 'leaflet';
|
||||
import BFlyBlack from './bfly-black';
|
||||
export default function MarkerButterflyBlack(props) {
|
||||
const positionM = [51.502, -0.09]
|
||||
return (
|
||||
<Marker
|
||||
position={positionM}
|
||||
icon={BFlyBlack}
|
||||
>
|
||||
<Popup>
|
||||
Popup
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import {Marker, Popup} from 'react-leaflet'
|
||||
import L from 'leaflet';
|
||||
import bfly from '../../assets/Logo_SIB_electricindigo.svg';
|
||||
export default function MarkerButterfly(props) {
|
||||
const positionM = [51.503, -0.09]
|
||||
const myIcon = new L.Icon({
|
||||
iconUrl: blfy,
|
||||
iconRetinaUrl: bfly,
|
||||
popupAnchor: [-0, -0],
|
||||
iconSize: [32,45],
|
||||
});
|
||||
return (
|
||||
<Marker
|
||||
position={positionM}
|
||||
icon={myIcon}
|
||||
>
|
||||
<Popup>
|
||||
Popup
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import PinMoto from './pin-moto'
|
||||
import { ReactDOM } from 'react'
|
||||
import { renderToStaticMarkup } from 'react-dom/server'
|
||||
import { divIcon } from 'leaflet'
|
||||
|
||||
export const getRequiredSVGPinByCategory = (category, myStyle) => {
|
||||
let pin
|
||||
switch (category) {
|
||||
case 'motorcycle':
|
||||
pin = <PinMoto {...myStyle}/>
|
||||
break;
|
||||
case 'truck':
|
||||
//pin = <PinCaminhao {...myStyle}/>
|
||||
break;
|
||||
default:
|
||||
//pin = <PinPadrao {...myStyle}/>
|
||||
break;
|
||||
}
|
||||
const iconMarkup = renderToStaticMarkup(
|
||||
pin
|
||||
)
|
||||
const customMarketIcon = divIcon({
|
||||
html: iconMarkup
|
||||
})
|
||||
return customMarketIcon
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
export default function PinMoto(props) {
|
||||
return (
|
||||
//its a SVG example, it`s by half, or corrupted, to not occupy large caracter space here, use your SVG file here...
|
||||
<svg width="37" height="45" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M13 0C6.0974 0 0.481453 5.83195 0.481453 13C0.481453 15.1519 0.999529 17.2855 1.98441 19.1779L12.3154 33.5811C12.4529 33.8397 12.715 34 13 34C13.285 34 13.547 33.8397 13.6846 33.5811L24.0194 19.1715C25.0005 17.2855 25.5185 15.1518 25.5185 12.9999C25.5185 5.83195 19.9026 0 13 0Z" fill="#DC462D" {...props}/>
|
||||
<g clip-Path="url(#clip0)">
|
||||
<path d="M19.0012 12.7109C17.3488 12.7109 16.0023 14.1322 16.0023 15.8763C16.0023 17.6204 17.3453 19.0417 19.0012 19.0417C20.6535 19.0417 22 17.6242 22 15.8763C22 14.1285 20.6535 12.7109 19.0012 12.7109ZM19.0012 18.2513C17.7602 18.2513 16.7512 17.1863 16.7512 15.8763C16.7512 14.5663 17.7602 13.5013 19.0012 13.5013C20.2422 13.5013 21.2512 14.5663 21.2512 15.8763C21.2512 17.1863 20.2422 18.2513 19.0012 18.2513Z" fill="white" />
|
||||
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="18" height="19" fill="white" transform="translate(4 4)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>);
|
||||
}
|
||||
Loading…
Reference in New Issue