feat: adjust icon
This commit is contained in:
parent
48044b9e0b
commit
4ebbe83b2e
|
|
@ -0,0 +1,191 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:ns1="http://sozi.baierouge.fr"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
id="svg2103"
|
||||
sodipodi:docname="aiga_bus_.svg"
|
||||
inkscape:export-filename="/home/joanna/gfx/vector/aiga/aiga_bus_.png"
|
||||
viewBox="0 0 355.02 435.06"
|
||||
sodipodi:version="0.32"
|
||||
inkscape:export-xdpi="41.321152"
|
||||
inkscape:output_extension="org.inkscape.output.svg.inkscape"
|
||||
inkscape:export-ydpi="41.321152"
|
||||
inkscape:version="0.46"
|
||||
sodipodi:docbase="/datas/Projs/Cliparts Stocker/tmp/AIGA"
|
||||
>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
bordercolor="#666666"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="641"
|
||||
pagecolor="#ffffff"
|
||||
inkscape:zoom="0.43415836"
|
||||
inkscape:window-x="0"
|
||||
showgrid="false"
|
||||
borderopacity="1.0"
|
||||
inkscape:current-layer="svg2103"
|
||||
inkscape:cx="305.25953"
|
||||
inkscape:cy="417.84947"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-height="715"
|
||||
inkscape:pageopacity="0.0"
|
||||
/>
|
||||
<path
|
||||
id="path2115"
|
||||
style="fill:#000000"
|
||||
d="m179.24 0c-40.26 0-95.852 11.502-118.86 21.087-23 9.585-38.336 19.17-43.128 43.132l-17.252 132.84v183.04h29.712v28.71c0 35 51.218 35 51.218 0v-28.71h94.56 0.3 98.3v28.71c0 35 51.22 35 51.22 0v-28.71h29.71v-183.04l-17.25-132.84c-4.79-23.963-20.13-33.548-43.13-43.133s-78.6-21.087-118.85-21.087"
|
||||
/>
|
||||
<g
|
||||
id="g2117"
|
||||
>
|
||||
<g
|
||||
id="g2119"
|
||||
>
|
||||
<g
|
||||
id="g2121"
|
||||
>
|
||||
<path
|
||||
id="path2123"
|
||||
style="fill:#ffffff"
|
||||
d="m299.68 322.72c13.57 0 24.57-11 24.57-24.57s-11-24.57-24.57-24.57-24.57 11-24.57 24.57 11 24.57 24.57 24.57z"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
<g
|
||||
id="g2127"
|
||||
>
|
||||
<path
|
||||
id="path2129"
|
||||
style="fill:#ffffff"
|
||||
d="m55.342 322.72c-13.568 0-24.568-11-24.568-24.57s11-24.57 24.568-24.57 24.569 11 24.569 24.57-11.001 24.57-24.569 24.57z"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
</g
|
||||
>
|
||||
<path
|
||||
id="path2133"
|
||||
style="fill:#ffffff"
|
||||
d="m175.61 55.113h-71.13c-14.382 0-14.382-21.566 0-21.566h71.31 74.76c14.38 0 14.38 21.566 0 21.566h-74.94z"
|
||||
/>
|
||||
<path
|
||||
id="path2135"
|
||||
style="fill:#ffffff"
|
||||
d="m175.61 76.887h-109.9c-15.183 0-19.151 7.717-20.995 19.423l-13.428 96.35c-1.252 9.23 1.419 18.4 14.178 18.4h130.32 133.78c12.76 0 15.43-9.17 14.18-18.4l-13.43-96.35c-1.85-11.706-5.81-19.423-21-19.423h-113.7z"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
<metadata
|
||||
>
|
||||
<rdf:RDF
|
||||
>
|
||||
<cc:Work
|
||||
>
|
||||
<dc:format
|
||||
>image/svg+xml</dc:format
|
||||
>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
|
||||
/>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
|
||||
/>
|
||||
<dc:publisher
|
||||
>
|
||||
<cc:Agent
|
||||
rdf:about="http://openclipart.org/"
|
||||
>
|
||||
<dc:title
|
||||
>Openclipart</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:publisher
|
||||
>
|
||||
<dc:title
|
||||
>aiga bus</dc:title
|
||||
>
|
||||
<dc:date
|
||||
>2009-04-27T10:03:21</dc:date
|
||||
>
|
||||
<dc:description
|
||||
>Set of international airport symbols. \n \nSource: http://www.aiga.org/content.cfm/symbol-signs \n \nConverted to SVG by Jean-Victor Balin.</dc:description
|
||||
>
|
||||
<dc:source
|
||||
>https://openclipart.org/detail/25356/aiga-bus-by-anonymous-25356</dc:source
|
||||
>
|
||||
<dc:creator
|
||||
>
|
||||
<cc:Agent
|
||||
>
|
||||
<dc:title
|
||||
>Anonymous</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:creator
|
||||
>
|
||||
<dc:subject
|
||||
>
|
||||
<rdf:Bag
|
||||
>
|
||||
<rdf:li
|
||||
>aiga</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>aiga no bg</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>black and white</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>externalsource</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>icon</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>map symbol</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>sign</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>silhouette</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>symbol</rdf:li
|
||||
>
|
||||
</rdf:Bag
|
||||
>
|
||||
</dc:subject
|
||||
>
|
||||
</cc:Work
|
||||
>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/licenses/publicdomain/"
|
||||
>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
|
||||
/>
|
||||
</cc:License
|
||||
>
|
||||
</rdf:RDF
|
||||
>
|
||||
</metadata
|
||||
>
|
||||
</svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,205 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:ns1="http://sozi.baierouge.fr"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
id="svg7200"
|
||||
sodipodi:docname="新規ドキュメント 8"
|
||||
viewBox="0 0 108.98 128"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
>
|
||||
<title
|
||||
id="title7784"
|
||||
>Train Pictogram</title
|
||||
>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
bordercolor="#666666"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-y="75"
|
||||
fit-margin-left="0"
|
||||
pagecolor="#ffffff"
|
||||
fit-margin-top="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:zoom="1.0681152"
|
||||
inkscape:window-x="445"
|
||||
inkscape:window-height="835"
|
||||
showgrid="false"
|
||||
borderopacity="1.0"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:cx="124.16542"
|
||||
inkscape:cy="84.155188"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1028"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:document-units="px"
|
||||
/>
|
||||
<g
|
||||
id="layer1"
|
||||
inkscape:label="レイヤー 1"
|
||||
inkscape:groupmode="layer"
|
||||
transform="translate(-241.12 -432.97)"
|
||||
>
|
||||
<g
|
||||
id="g7774"
|
||||
transform="matrix(1.4014 0 0 1.4014 -96.781 -225.17)"
|
||||
>
|
||||
<path
|
||||
id="rect7100-7"
|
||||
style="fill:#000000"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m248.26 469.63c-3.946 0-7.1388 3.1479-7.1388 7.0939v54.91c0 3.946 3.1928 7.0939 7.1388 7.0939h2.5592l6.6449 7.1388h45.078l6.6449-7.1388h2.5592c3.946 0 7.1388-3.1479 7.1388-7.0939v-54.91c0-3.946-3.1928-7.0939-7.1388-7.0939h-63.486z"
|
||||
/>
|
||||
<path
|
||||
id="path4362-12-0"
|
||||
style="fill:#ffffff"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m265.71 526.49c0 3.0537-2.4755 5.5292-5.5293 5.5292-3.0537 0-5.5293-2.4755-5.5293-5.5292s2.4755-5.5293 5.5293-5.5293c3.0537 0 5.5293 2.4755 5.5293 5.5293z"
|
||||
/>
|
||||
<path
|
||||
id="path4362-1-7-5"
|
||||
style="fill:#ffffff"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m305.37 526.49c0 3.0537-2.4756 5.5292-5.5293 5.5292-3.0538 0-5.5293-2.4755-5.5293-5.5292s2.4755-5.5293 5.5293-5.5293c3.0537 0 5.5293 2.4755 5.5293 5.5293z"
|
||||
/>
|
||||
<rect
|
||||
id="rect7177-6"
|
||||
style="stroke-linejoin:round;stroke:#ffffff;stroke-linecap:round;stroke-width:3.9184;fill:#ffffff"
|
||||
rx="2.7303"
|
||||
ry="2.7303"
|
||||
height="23.472"
|
||||
width="52.487"
|
||||
y="490.43"
|
||||
x="253.77"
|
||||
/>
|
||||
<g
|
||||
id="g7447-7"
|
||||
style="stroke:#000000"
|
||||
transform="matrix(1.3061 0 0 1.3061 980.29 837.94)"
|
||||
>
|
||||
<path
|
||||
id="path7239-3"
|
||||
style="stroke:#000000;stroke-width:3;fill:none"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m-544.91-228.32c-8.4122 14.57-8.5205 14.758-8.5205 14.758"
|
||||
/>
|
||||
<path
|
||||
id="path7239-2-8"
|
||||
style="stroke:#000000;stroke-width:3;fill:none"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m-518.9-213.56c-8.4122-14.57-8.5205-14.758-8.5205-14.758"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
<rect
|
||||
id="rect7177-8-4"
|
||||
style="stroke-linejoin:round;stroke:#ffffff;stroke-linecap:round;stroke-width:3.9184;fill:#ffffff"
|
||||
rx=".43259"
|
||||
ry=".43259"
|
||||
height="3.9989"
|
||||
width="17.068"
|
||||
y="477.19"
|
||||
x="271.47"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
</g
|
||||
>
|
||||
<metadata
|
||||
>
|
||||
<rdf:RDF
|
||||
>
|
||||
<cc:Work
|
||||
>
|
||||
<dc:format
|
||||
>image/svg+xml</dc:format
|
||||
>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
|
||||
/>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
|
||||
/>
|
||||
<dc:publisher
|
||||
>
|
||||
<cc:Agent
|
||||
rdf:about="http://openclipart.org/"
|
||||
>
|
||||
<dc:title
|
||||
>Openclipart</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:publisher
|
||||
>
|
||||
<dc:title
|
||||
>Train Pictogram</dc:title
|
||||
>
|
||||
<dc:date
|
||||
>2012-12-09T14:40:45</dc:date
|
||||
>
|
||||
<dc:description
|
||||
>A simple train pictogram.</dc:description
|
||||
>
|
||||
<dc:source
|
||||
>https://openclipart.org/detail/173654/train-pictogram-by-libberry-173654</dc:source
|
||||
>
|
||||
<dc:creator
|
||||
>
|
||||
<cc:Agent
|
||||
>
|
||||
<dc:title
|
||||
>libberry</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:creator
|
||||
>
|
||||
<dc:subject
|
||||
>
|
||||
<rdf:Bag
|
||||
>
|
||||
<rdf:li
|
||||
>pictogram</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>symbol</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>train</rdf:li
|
||||
>
|
||||
</rdf:Bag
|
||||
>
|
||||
</dc:subject
|
||||
>
|
||||
</cc:Work
|
||||
>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/licenses/publicdomain/"
|
||||
>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
|
||||
/>
|
||||
</cc:License
|
||||
>
|
||||
</rdf:RDF
|
||||
>
|
||||
</metadata
|
||||
>
|
||||
</svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="838" height="413" viewBox="0 0 838 413" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="M258 180.007c0-4.422 3.586-8.007 8.004-8.007h71.993c4.42 0 8.004 3.582 8.004 8.007v57.986c0 4.422-3.586 8.007-8.004 8.007h-71.993c-4.42 0-8.004-3.582-8.004-8.007v-57.986zm-219.703-43.663s-8.546 2.325-9.791 3.396c-4.13 3.551-6.334 10.468-6.334 10.468s-4.764 33.401-8.477 49.635c-3.209 14.032-12.289 41.162-12.289 41.162l-1 129.066 70.969.742v12.637h36.109s3.358 29.25 31.876 29.25c28.519 0 28.519-28.508 28.519-28.508l39.301.484s.605 28.023 28.602 28.023 30.531-28.766 30.531-28.766l302.336-1.449s0 30.215 29.707 29.957c29.707-.258 28.648-27.957 28.648-27.957l37.598.258s0 24.978 28.976 27.165c28.976 2.187 30.313-29.13 30.313-29.13l38.598.742.738-11.676 72.934-1.258 1.223-122.648s-10.503-30.264-14.069-43.286c-6.063-22.142-14.818-62.207-14.818-62.207s-4.555-3.372-7.315-4.706c-2.023-.977-9.032-2.228-9.032-2.228l-280.277 1.48s-2.964-5.762-5.37-8.286c-2.859-2.999-10.427-8.284-10.427-8.284l-158.984-1.484s-8.498 4.487-11.247 7.231c-2.7 2.695-5.101 9.085-5.101 9.085l-282.445 1.09zm4.741 36.338c1.312-.878 4.935-1.635 4.935-1.635l27.931-.8s10.283 2.277 10.283 9.224v56.635s-1.387 10.144-10.247 10.144-38.243-1.338-38.243-1.338-9.464-1.719-9.464-11.463 12.502-57.555 12.502-57.555 1.202-2.475 2.303-3.212zm746.052 0c-1.312-.878-4.935-1.635-4.935-1.635l-27.931-.8s-10.283 2.277-10.283 9.224v56.635s1.387 10.144 10.247 10.144 38.243-1.338 38.243-1.338 9.464-1.719 9.464-11.463-12.502-57.555-12.502-57.555-1.202-2.475-2.303-3.212zm-678.089 8.311c0-4.414 3.588-7.992 7.994-7.992h40.013c4.415 0 7.994 3.591 7.994 7.992v170.016c0 4.414-3.588 7.992-7.994 7.992h-40.013c-4.415 0-7.994-3.591-7.994-7.992v-170.016zm70-3c0-4.414 3.588-7.992 7.994-7.992h40.013c4.415 0 7.994 3.591 7.994 7.992v170.016c0 4.414-3.588 7.992-7.994 7.992h-40.013c-4.415 0-7.994-3.591-7.994-7.992v-170.016zm414 0c0-4.414 3.588-7.992 7.994-7.992h40.013c4.415 0 7.994 3.591 7.994 7.992v170.016c0 4.414-3.588 7.992-7.994 7.992h-40.013c-4.415 0-7.994-3.591-7.994-7.992v-170.016zm70 0c0-4.414 3.588-7.992 7.994-7.992h40.013c4.415 0 7.994 3.591 7.994 7.992v170.016c0 4.414-3.588 7.992-7.994 7.992h-40.013c-4.415 0-7.994-3.591-7.994-7.992v-170.016zm-182 1.263c0-4.422 3.586-8.007 8.004-8.007h71.993c4.42 0 8.004 3.582 8.004 8.007v57.986c0 4.422-3.586 8.007-8.004 8.007h-71.993c-4.42 0-8.004-3.582-8.004-8.007v-57.986zm-111.94.002c0-4.422 3.586-8.007 8.004-8.007h71.993c4.42 0 8.004 3.582 8.004 8.007v57.986c0 4.422-3.586 8.007-8.004 8.007h-71.993c-4.42 0-8.004-3.582-8.004-8.007v-57.986z"/><path d="M397.598 120.832l-66.742-46.008 67.551-45.527 1.742-23.695 5.965-5.227h18.348l7.191 8.449 2.223 17.605 66.516 48.461-68.703 46.461-34.09-.52zm17.359-80.996l-58.426 35.887 56.133 34.887 61.84-34.594-57.941-36.371-1.605.191z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
import bfly from '../../assets/Logo_SIB_electricindigo.svg';
|
||||
import bus from '../../assets/bus.svg';
|
||||
import train from '../../assets/train.svg';
|
||||
import tram from '../../assets/tram.svg';
|
||||
|
||||
/* return URL that fits GTFS route_type*/
|
||||
export default function getIconUrl(routeTypeEnum){
|
||||
//console.log('getIconUrl() routeTypeEnum: '+routeTypeEnum);
|
||||
return routeTypeEnum===0?tram:
|
||||
routeTypeEnum===1?bfly:
|
||||
routeTypeEnum===2?train:
|
||||
routeTypeEnum===3?bus:
|
||||
bfly;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import getIconUrl from './icon-url';
|
||||
|
||||
/*return icon object*/
|
||||
export default function getIcon(ptByIfleet){
|
||||
if(ptByIfleet===undefined || ptByIfleet===null){
|
||||
//console.log('getIcon(): ptByIfleet NOT available')
|
||||
return null;
|
||||
}
|
||||
else{
|
||||
//console.log('getIcon(): ptByIfleet available')
|
||||
const icon = new L.Icon({
|
||||
/*path to icon graphic*/
|
||||
iconUrl: getIconUrl(ptByIfleet.route_type),
|
||||
/*path to graphic used for high resolution monitors*/
|
||||
iconRetinaUrl: getIconUrl(ptByIfleet.route_type),
|
||||
popupAnchor: [-0, -0],
|
||||
/*size of the icon in width and hight*/
|
||||
iconSize: [32,32],
|
||||
/*determine how the popup is positions relative to the actual point on the map*/
|
||||
popupAnchor:[0,-10],
|
||||
/*determine how the image is positions relative to the actual point on the map*/
|
||||
iconAnchor: null,
|
||||
/*path to shadow graphic*/
|
||||
shadowUrl: null,
|
||||
/*size of the shadow in width and hight*/
|
||||
shadowSize: null,
|
||||
/*determine how the mage is positions relative to the actual point on the map*/
|
||||
shadowAnchor: null,
|
||||
className: 'marker-msg'
|
||||
});
|
||||
//console.log('getIcon(): icon available')
|
||||
return icon;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -8,10 +8,16 @@ import './map.css';
|
|||
import MsgMarker from './marker-msg';
|
||||
|
||||
export default function Map({messages}) {
|
||||
const position = [53.2206976, 7.7585528]
|
||||
/*lat and lon of Braunschweig,DE*/
|
||||
const position = [52.26594, 10.52673]
|
||||
return (
|
||||
<>
|
||||
<MapContainer center={position} zoom={6} scrollWheelZoom={false}>
|
||||
<MapContainer
|
||||
center={position}
|
||||
zoom={5}
|
||||
minZoom={2}
|
||||
scrollWheelZoom={true}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Marker} from 'react-leaflet';
|
||||
|
||||
import PopupMsg from './popup-msg';
|
||||
import getIcon from './icon';
|
||||
|
||||
const MarkerMsgPlus = ({ index,message,ptByIfleet }) => {
|
||||
|
||||
if(message===undefined || message===null
|
||||
|| Object.keys(ptByIfleet).length===0){
|
||||
return null;
|
||||
}else{
|
||||
const markerIcon=getIcon(ptByIfleet);
|
||||
if(markerIcon===null){
|
||||
return null;
|
||||
}else{
|
||||
return(
|
||||
<>
|
||||
<Marker
|
||||
index={index}
|
||||
key={index}
|
||||
position={[message.lat,message.lon]}
|
||||
icon={markerIcon}
|
||||
>
|
||||
<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
|
||||
</Marker>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default MarkerMsgPlus;
|
||||
|
||||
|
||||
MarkerMsgPlus.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object,
|
||||
ptByIfleet: PropTypes.object
|
||||
};
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import React, {useEffect,useState} from 'react';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Marker} from 'react-leaflet';
|
||||
|
||||
import PopupMsg from './popup-msg';
|
||||
import bfly from '../../assets/Logo_SIB_electricindigo.svg';
|
||||
import MarkerMsgPlus from './marker-msg-plus';
|
||||
|
||||
const MarkerMsg = ({ index,message }) => {
|
||||
/*store state*/
|
||||
const [ptByIfleet,setPtByIfleet]=useState({});
|
||||
|
|
@ -22,23 +21,22 @@ const MarkerMsg = ({ index,message }) => {
|
|||
useEffect(()=>{
|
||||
getPtByIfleet();
|
||||
},[]);
|
||||
const iconBfly = new L.Icon({
|
||||
iconUrl: bfly,
|
||||
iconRetinaUrl: bfly,
|
||||
popupAnchor: [-0, -0],
|
||||
iconSize: [32,45],
|
||||
});
|
||||
return(
|
||||
<>
|
||||
<Marker
|
||||
index={index}
|
||||
position={[message.lat,message.lon]}
|
||||
icon={iconBfly}
|
||||
>
|
||||
<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
|
||||
</Marker>
|
||||
</>
|
||||
);
|
||||
|
||||
if(message===undefined || message===null
|
||||
|| Object.keys(ptByIfleet).length===0){
|
||||
return null;
|
||||
}else{
|
||||
return(
|
||||
<>
|
||||
<MarkerMsgPlus
|
||||
index={index}
|
||||
key={index}
|
||||
message={message}
|
||||
ptByIfleet={ptByIfleet}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default MarkerMsg;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
|
|||
import {Popup} from 'react-leaflet';
|
||||
|
||||
import seconds2dmhs from '../../utils/seconds2dhms';
|
||||
import getRouteType from '../../utils/gtfs-route-type';
|
||||
|
||||
const PopupMsg = ({index,message,ptByIfleet}) => {
|
||||
const vehicleAge=seconds2dmhs(Math.round(((Date.now()-message.tsMsgCreationVehicle*1000)/1000).toFixed(0)));
|
||||
const itcsAge=seconds2dmhs(Math.round(((Date.now()-message.tsMsgCreationItcs*1000)/1000).toFixed(0)));
|
||||
|
|
@ -10,7 +12,9 @@ const PopupMsg = ({index,message,ptByIfleet}) => {
|
|||
return (
|
||||
<>
|
||||
<Popup
|
||||
index={index}>
|
||||
index={index}
|
||||
key={index}
|
||||
>
|
||||
id: {message.id} <br/>
|
||||
vehicle id: {message.vehicleId} <br/>
|
||||
creation time at vehicle: ts:{message.tsMsgCreationVehicle}, age:{vehicleAge} <br/>
|
||||
|
|
@ -21,7 +25,7 @@ const PopupMsg = ({index,message,ptByIfleet}) => {
|
|||
trip destination: {ptByIfleet.trip_headsign} <br/>
|
||||
route id: {ptByIfleet.route_id} <br/>
|
||||
route name: {ptByIfleet.route_short_name} <br/>
|
||||
route type: {ptByIfleet.route_type} <br/>
|
||||
route type: {ptByIfleet.route_type}({getRouteType(ptByIfleet.route_type)}) <br/>
|
||||
agency id: {ptByIfleet.agency_id} <br/>
|
||||
agency name: {ptByIfleet.agency_name} <br/>
|
||||
agency URL: {ptByIfleet.agency_url} <br/>
|
||||
|
|
@ -33,7 +37,6 @@ const PopupMsg = ({index,message,ptByIfleet}) => {
|
|||
}
|
||||
export default PopupMsg;
|
||||
|
||||
|
||||
PopupMsg.propTypes = {
|
||||
index: PropTypes.number,
|
||||
message: PropTypes.object,
|
||||
|
|
|
|||
|
|
@ -34,10 +34,16 @@ export default function MapPage() {
|
|||
}
|
||||
//console.log('getData() done.');
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
/*do not wait the interval when component loads the first time*/
|
||||
getData();
|
||||
|
||||
/*refresh data periodically*/
|
||||
const intervalCall=setInterval(()=>{
|
||||
getData();
|
||||
}, 5000);
|
||||
/*TODO adjust interval, make it available via config file*/
|
||||
return ()=>{
|
||||
/*clean up*/
|
||||
clearInterval(intervalCall);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/* return GTFS route_type as text*/
|
||||
export default function getRouteType(routeTypeEnum){
|
||||
//console.log('getRouteType() routeTypeEnum: '+routeTypeEnum);
|
||||
return routeTypeEnum==='0'?'Tram':
|
||||
routeTypeEnum===1?'Subway':
|
||||
routeTypeEnum===2?'Rail':
|
||||
routeTypeEnum===3?'Bus':
|
||||
routeTypeEnum===4?'Ferry':
|
||||
routeTypeEnum===5?'Cable tram':
|
||||
routeTypeEnum===6?'Aerial lift':
|
||||
routeTypeEnum===7?'Funicular':
|
||||
routeTypeEnum===11?'Trolleybus':
|
||||
routeTypeEnum===12?'Monorail':'Unknown';
|
||||
};
|
||||
Loading…
Reference in New Issue