Merge pull request #397 from stesie/overpass-icons

Use L.Marker in Overpass layer + maki/temaki icons
This commit is contained in:
Norbert Renner 2021-04-06 17:19:42 +02:00 committed by GitHub
commit 87858b36e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 173 additions and 4 deletions

View file

@ -132,3 +132,7 @@ Copyright (c) 2018 Norbert Renner and [contributors](https://github.com/nrenner/
Copyright (c) 2014-present, Facebook, Inc.; [MIT License](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/LICENSE)
- [overpass-layer](https://github.com/plepe/overpass-layer)
Copyright (c) 2020 Stephan Bösch-Plepelits; [MIT License](https://github.com/plepe/overpass-layer/blob/master/LICENSE)
- [maki](https://github.com/mapbox/maki)
[CC0-1.0 License](https://github.com/mapbox/maki/blob/master/LICENSE.txt)
- [temaki](https://github.com/ideditor/temaki)
[CC0-1.0 License](https://github.com/ideditor/temaki/blob/main/LICENSE.md)

View file

@ -54,6 +54,23 @@ table.dataTable {
vertical-align: top;
}
.overpass-layer-icon .sign > * {
position: absolute;
top: -34px;
margin: auto;
display: inline-block;
font-size: 11px;
}
.overpass-layer-icon .icon-white {
color: white;
}
.overpass-layer-icon .icon-invert {
-webkit-filter: invert(1);
filter: invert(1);
}
/* wrap toolbar controls */
.leaflet-top.leaflet-left {
bottom: 0;

View file

@ -183,7 +183,15 @@ BR.LayersConfig = L.Class.extend({
}
},
createOverpassLayer: function (query) {
createOverpassLayer: function (query, icon) {
let markerSign = '<i class="fa fa-search icon-white" style="width: 25px;"></i>';
if (icon && icon.startsWith('maki-')) {
markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(5)}-11.svg" />`;
} else if (icon && icon.startsWith('temaki-')) {
markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(7)}.svg" width="11" />`;
}
return Object.assign(
new OverpassLayer({
overpassFrontend: this.overpassFrontend,
@ -193,9 +201,19 @@ BR.LayersConfig = L.Class.extend({
title: '{{ tags.name }}',
body:
'<table class="overpass-tags">{% for k, v in tags %}{% if k[:5] != "addr:" %}<tr><th>{{ k }}</th><td>{% if k matches "/email/" %}<a href="mailto:{{ v }}">{{ v }}</a>{% elseif v matches "/^http/" %}<a href="{{ v }}">{{ v }}</a>{% elseif v matches "/^www/" %}<a href="http://{{ v }}">{{ v }}</a>{% else %}{{ v }}{% endif %}</td></tr>{% endif %}{% endfor %}</table>',
markerSymbol: null,
markerSymbol:
'<svg width="25px" height="41px" anchorX="12" anchorY="41" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z" fill="#436978"></path></svg>',
markerSign,
style: function (overpassObject) {
return this.defaultBaseLayers?.[0] === 'cyclosm' ? { color: 'darkorange' } : {};
return {
// nodeFeature: 'Marker' isn't currently working well, hence use transparent circle color for nodes
color:
overpassObject.type === 'node'
? '#00000000'
: this.defaultBaseLayers?.[0] === 'cyclosm'
? 'darkorange'
: '#3388ff',
};
}.bind(this),
},
}),
@ -289,7 +307,7 @@ BR.LayersConfig = L.Class.extend({
layer.subdomains = props.subdomains;
}
} else if (props.dataSource === 'OverpassAPI') {
layer = this.createOverpassLayer(props.query);
layer = this.createOverpassLayer(props.query, props.icon);
} else {
// JOSM
var josmUrl = url;

View file

@ -5,6 +5,7 @@
"id": "atm",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bank",
"query": "(nwr[amenity=atm]; nwr[amenity=bank][atm][atm!=no];);"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bank",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bank",
"query": "nwr[amenity=bank];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bench",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bench",
"query": "nwr[amenity=bench];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "kneipp_water_cure",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-hospital",
"query": "nwr[amenity=kneipp_water_cure];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "public_bath",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-water",
"query": "nwr[amenity=public_bath];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "shelter",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-shelter",
"query": "nwr[amenity=shelter];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "shower",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-shower",
"query": "nwr[amenity=shower];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "telephone",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-phone-alt",
"query": "nwr[amenity=telephone];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "toilets",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-toilet",
"query": "nwr[amenity=toilets];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "water_point",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-drinking-water",
"query": "nwr[amenity=water_point];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bar",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bar",
"query": "nwr[amenity=bar];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bbq",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bbq",
"query": "nwr[amenity=bbq];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "biergarten",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-beer",
"query": "nwr[amenity=biergarten];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "cafe",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-cafe",
"query": "nwr[amenity=cafe];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "drinking_water",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-drinking-water",
"query": "nwr[amenity=drinking_water];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "fast_food",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-fast-food",
"query": "nwr[amenity=fast_food];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "food_court",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-restaurant",
"query": "nwr[amenity=food_court];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "ice_cream",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-ice-cream",
"query": "nwr[amenity=ice_cream];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "pub",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-beer",
"query": "nwr[amenity=pub];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "restaurant",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-restaurant",
"query": "nwr[amenity=restaurant];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bicycle_parking",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bicycle",
"query": "nwr[amenity=bicycle_parking];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bicycle_rental",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bicycle_rental",
"query": "nwr[amenity=bicycle_rental];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bicycle_repair_station",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bicycle_repair",
"query": "nwr[amenity=bicycle_repair_station];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "boat_rental",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-boat_rental",
"query": "nwr[amenity=boat_rental];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bus_station",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bus",
"query": "nwr[amenity=bus_station];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "car_rental",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-car-rental",
"query": "nwr[amenity=car_rental];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "car_sharing",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-sign_and_car",
"query": "nwr[amenity=car_sharing];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "car_wash",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-car_wash",
"query": "nwr[amenity=car_wash];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "charging_station",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-charging-station",
"query": "nwr[amenity=charging_station];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "ferry_terminal",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-ferry",
"query": "nwr[amenity=ferry_terminal];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "fuel",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-fuel",
"query": "nwr[amenity=fuel];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "grit_bin",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-box",
"query": "nwr[amenity=grit_bin];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "motorcycle_parking",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-motorcycle",
"query": "nwr[amenity=motorcycle_parking];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "parking",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-car_parked",
"query": "nwr[amenity=parking];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "parking_entrance",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-entrance-alt1",
"query": "nwr[amenity=parking_entrance];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "parking_space",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-parking_space",
"query": "nwr[amenity=parking_space];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "taxi",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-taxi",
"query": "nwr[amenity=taxi];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "vehicle_inspection",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-car",
"query": "nwr[amenity=vehicle_inspection];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "bakery",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-bakery",
"query": "nwr[shop=bakery];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "beverages",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bottles",
"query": "nwr[shop=beverages];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "butcher",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-cleaver",
"query": "nwr[shop=butcher];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "cheese",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-cheese",
"query": "nwr[shop=cheese];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "coffee",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-coffee",
"query": "nwr[shop=coffee];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "convenience",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-shopping-basket",
"query": "nwr[shop=convenience];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "greengrocer",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-carrot",
"query": "nwr[shop=greengrocer];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "health_food",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-shop",
"query": "nwr[shop=health_food];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "ice_cream",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-ice-cream",
"query": "nwr[shop=ice_cream];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "organic",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-grocery",
"query": "nwr[shop~'supermarket|convenience'][organic][organic!=no];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "apartment",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-lodging",
"query": "nwr[tourism=apartment];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "artwork",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-art-gallery",
"query": "nwr[tourism=artwork];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "attraction",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-star",
"query": "nwr[tourism=attraction];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "camp_site",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-campsite",
"query": "nwr[tourism=camp_site];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "caravan_site",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-camper_trailer",
"query": "nwr[tourism=caravan_site];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "chalet",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-cabin",
"query": "nwr[tourism=chalet];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "gallery",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-art-gallery",
"query": "nwr[tourism=gallery];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "guest_house",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-lodging",
"query": "nwr[tourism=guest_house];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "hostel",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-bunk_beds",
"query": "nwr[tourism=hostel];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "hotel",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "fas-concierge-bell",
"query": "nwr[tourism=hotel];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "information",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-information",
"query": "nwr[tourism=information];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "motel",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-lodging",
"query": "nwr[tourism=motel];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "museum",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-museum",
"query": "nwr[tourism=museum];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "picnic_site",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "maki-picnic-site",
"query": "nwr[tourism=picnic_site];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "viewpoint",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-spotting_scope",
"query": "nwr[tourism=viewpoint];"
},
"type": "Feature"

View file

@ -5,6 +5,7 @@
"id": "wilderness_hut",
"overlay": true,
"dataSource": "OverpassAPI",
"icon": "temaki-cabin",
"query": "nwr[tourism=wilderness_hut];"
},
"type": "Feature"

View file

@ -36,6 +36,8 @@
],
"dependencies": {
"@bagage/leaflet.restoreview": "1.0.1",
"@ideditor/temaki": "^5.0.0",
"@mapbox/maki": "^6.2.0",
"@mapbox/polyline": "^0.2.0",
"@mapbox/togeojson": "^0.16.0",
"@turf/turf": "^6.2.0",
@ -283,6 +285,60 @@
"main": [
"dist/overpass-layer.js"
]
},
"@mapbox/maki": {
"main": [
"icons/art-gallery-11.svg",
"icons/bakery-11.svg",
"icons/bank-11.svg",
"icons/bar-11.svg",
"icons/bbq-11.svg",
"icons/beer-11.svg",
"icons/bicycle-11.svg",
"icons/cafe-11.svg",
"icons/campsite-11.svg",
"icons/car-11.svg",
"icons/car-rental-11.svg",
"icons/drinking-water-11.svg",
"icons/entrance-alt1-11.svg",
"icons/fast-food-11.svg",
"icons/fuel-11.svg",
"icons/grocery-11.svg",
"icons/hospital-11.svg",
"icons/information-11.svg",
"icons/lodging-11.svg",
"icons/picnic-site-11.svg",
"icons/restaurant-11.svg",
"icons/shelter-11.svg",
"icons/shop-11.svg",
"icons/star-11.svg",
"icons/toilet-11.svg",
"icons/water-11.svg"
]
},
"@ideditor/temaki": {
"main": [
"icons/bench.svg",
"icons/shower.svg",
"icons/bicycle_rental.svg",
"icons/bicycle_repair.svg",
"icons/boat_rental.svg",
"icons/bus.svg",
"icons/sign_and_car.svg",
"icons/car_wash.svg",
"icons/ferry.svg",
"icons/car_parked.svg",
"icons/parking_space.svg",
"icons/bottles.svg",
"icons/cleaver.svg",
"icons/coffee.svg",
"icons/camper_trailer.svg",
"icons/cabin.svg",
"icons/bunk_beds.svg",
"icons/museum.svg",
"icons/spotting_scope.svg",
"icons/cabin.svg"
]
}
}
}

View file

@ -884,6 +884,11 @@
normalize-path "^2.0.1"
through2 "^2.0.3"
"@ideditor/temaki@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@ideditor/temaki/-/temaki-5.0.0.tgz#8351b3c47de59e9b98396c2cca49bc3dc2049e0a"
integrity sha512-doBSdSEr03uGx+hpe14ELxUkCoJexjwZ4/bPyMaBJjMHXlb8lKtCr7oG7YZTZsuzcFZCYGxfCTQsgpoO42vZnQ==
"@mapbox/geojson-area@0.2.2":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz#18d7814aa36bf23fbbcc379f8e26a22927debf10"
@ -901,6 +906,11 @@
minimist "1.2.0"
sharkdown "^0.1.0"
"@mapbox/maki@^6.2.0":
version "6.2.0"
resolved "https://registry.yarnpkg.com/@mapbox/maki/-/maki-6.2.0.tgz#b61b3e8e7fc7637493e511ac40de0eea62cd1f8b"
integrity sha512-iFIRNT3ZpTOw69p2BFFOmQppujpav2PQTLPyL4+bZ5ZIUfdyB5Qtw45CTfPqzzHpP2AZGjEDbSNhGDRcG9/2fw==
"@mapbox/polyline@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-0.2.0.tgz#6e25980744aa22331f94b645a542c02d3fcfee97"