Skip to content

Commit

Permalink
POI icons code for showing icons in spritesheets [#1]
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdon
bdon committed Sep 29, 2024
1 parent 491067d commit a5db640
Show file tree
Hide file tree
Showing 2 changed files with 181 additions and 138 deletions.
290 changes: 152 additions & 138 deletions basemaps/layers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,20 @@ outline: deep
---
<script setup>
import MaplibreMap from '../components/MaplibreMap.vue'
import Icon from '../components/Icon.vue'

const sprites = Promise.all([
fetch("https://protomaps.github.io/basemaps-assets/sprites/v3/light@2x.json").then(resp => resp.json()),
new Promise((resolve,reject) => {
if (typeof window !== 'undefined') {
const img = new Image();
img.onload = () => { resolve(img); }
img.src = "https://protomaps.github.io/basemaps-assets/sprites/v3/light@2x.png"
} else {
resolve(null);
}
})
]);
</script>

# Basemap Layers
Expand Down Expand Up @@ -169,144 +183,144 @@ Points from OpenStreetMap, from a curated subset of aeroway, amenity, attraction

_NOTE: The list of kind values is not comprehensive as some raw OSM tag values are passed through in the current version._

| kind |
| ------------------------ |
| `aerodrome` |
| `adult_gaming_centre` |
| `airfield` |
| `alpine_hut` |
| `amusement_ride` |
| `animal` |
| `art` |
| `artwork` |
| `atm` |
| `attraction` |
| `atv` |
| `baby_hatch` |
| `bakery` |
| `bbq` |
| `beauty` |
| `bed_and_breakfast` |
| `bench` |
| `bicycle_parking` |
| `bicycle_rental` |
| `bicycle_repair_station` |
| `boat_storage` |
| `bookmaker` |
| `books` |
| `bureau_de_change` |
| `bus_stop` |
| `butcher` |
| `cafe` |
| `camp_site` |
| `car_parts` |
| `car_rental` |
| `car_repair` |
| `car_sharing` |
| `car_wash` |
| `car` |
| `carousel` |
| `cemetery` |
| `chalet` |
| `charging_station` |
| `childcare` |
| `clinic` |
| `clothes` |
| `college` |
| `computer` |
| `convenience` |
| `customs` |
| `dentist` |
| `district` |
| `doctors` |
| `dog_park` |
| `drinking_water` |
| `emergency_phone` |
| `fashion` |
| `firepit` |
| `fishing` |
| `florist` |
| `forest` |
| `fuel` |
| `gambling` |
| `garden_centre` |
| `gift` |
| `golf_course` |
| `golf` |
| `greengrocer` |
| `grocery` |
| `guest_house` |
| `hairdresser` |
| `hanami` |
| `harbourmaster` |
| `hifi` |
| `hospital` |
| `hostel` |
| `hotel` |
| `hunting_stand` |
| `information` |
| `jewelry` |
| `karaoke_box` |
| `karaoke` |
| `landmark` |
| `library` |
| `life_ring` |
| `lottery` |
| `marina` |
| `maze` |
| `memorial` |
| `military` |
| `mobile_phone` |
| `money_transfer` |
| `motorcycle_parking` |
| `motorcycle` |
| `national_park` |
| `naval_base` |
| `newsagent` |
| `optician` |
| `park` |
| `parking` |
| `perfumery` |
| `picnic_site` |
| `picnic_table` |
| `pitch` |
| `playground` |
| `post_box` |
| `post_office` |
| `ranger_station` |
| `recycling` |
| `roller_coaster` |
| `sanitary_dump_station` |
| `school` |
| `scuba_diving` |
| `shelter` |
| `ship_chandler` |
| `shower` |
| `slipway` |
| `snowmobile` |
| `social_facility` |
| `stadium` |
| `stationery` |
| `studio` |
| `summer_toboggan` |
| `supermarket` |
| `swimming_area` |
| `taxi` |
| `telephone` |
| `tobacco` |
| `toilets` |
| `townhall` |
| `trail_riding_station` |
| `travel_agency` |
| `university` |
| `viewpoint` |
| `waste_basket` |
| `waste_disposal` |
| `water_point` |
| `water_slide` |
| `watering_place` |
| `wayside_cross` |
| `wilderness_hut` |
| kind | icon |
| ------------------------ | ---- |
| `aerodrome` | |
| `adult_gaming_centre` | |
| `airfield` | |
| `alpine_hut` | |
| `amusement_ride` | |
| `animal` | |
| `art` | |
| `artwork` | |
| `atm` | |
| `attraction` | |
| `atv` | |
| `baby_hatch` | |
| `bakery` | |
| `bbq` | |
| `beauty` | |
| `bed_and_breakfast` | |
| `bench` | |
| `bicycle_parking` | |
| `bicycle_rental` | |
| `bicycle_repair_station` | |
| `boat_storage` | |
| `bookmaker` | |
| `books` | |
| `bureau_de_change` | |
| `bus_stop` | |
| `butcher` | |
| `cafe` | |
| `camp_site` | |
| `car_parts` | |
| `car_rental` | |
| `car_repair` | |
| `car_sharing` | |
| `car_wash` | |
| `car` | |
| `carousel` | |
| `cemetery` | |
| `chalet` | |
| `charging_station` | |
| `childcare` | |
| `clinic` | |
| `clothes` | |
| `college` | |
| `computer` | |
| `convenience` | |
| `customs` | |
| `dentist` | |
| `district` | |
| `doctors` | |
| `dog_park` | |
| `drinking_water` | |
| `emergency_phone` | |
| `fashion` | |
| `firepit` | |
| `fishing` | |
| `florist` | |
| `forest` | |
| `fuel` | |
| `gambling` | |
| `garden_centre` | |
| `gift` | |
| `golf_course` | |
| `golf` | |
| `greengrocer` | |
| `grocery` | |
| `guest_house` | |
| `hairdresser` | |
| `hanami` | |
| `harbourmaster` | |
| `hifi` | |
| `hospital` | |
| `hostel` | |
| `hotel` | |
| `hunting_stand` | |
| `information` | |
| `jewelry` | |
| `karaoke_box` | |
| `karaoke` | |
| `landmark` | |
| `library` | |
| `life_ring` | |
| `lottery` | |
| `marina` | |
| `maze` | |
| `memorial` | |
| `military` | |
| `mobile_phone` | |
| `money_transfer` | |
| `motorcycle_parking` | |
| `motorcycle` | |
| `national_park` | |
| `naval_base` | |
| `newsagent` | |
| `optician` | |
| `park` | |
| `parking` | |
| `perfumery` | |
| `picnic_site` | |
| `picnic_table` | |
| `pitch` | |
| `playground` | |
| `post_box` | |
| `post_office` | |
| `ranger_station` | |
| `recycling` | |
| `roller_coaster` | |
| `sanitary_dump_station` | |
| `school` | |
| `scuba_diving` | |
| `shelter` | |
| `ship_chandler` | |
| `shower` | |
| `slipway` | |
| `snowmobile` | |
| `social_facility` | |
| `stadium` | |
| `stationery` | |
| `studio` | |
| `summer_toboggan` | |
| `supermarket` | |
| `swimming_area` | |
| `taxi` | |
| `telephone` | |
| `tobacco` | |
| `toilets` | |
| `townhall` | |
| `trail_riding_station` | |
| `travel_agency` | |
| `university` | |
| `viewpoint` | |
| `waste_basket` | |
| `waste_disposal` | |
| `water_point` | |
| `water_slide` | |
| `watering_place` | |
| `wayside_cross` | |
| `wilderness_hut` | |


## roads
Expand Down
29 changes: 29 additions & 0 deletions components/Icon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script setup lang="ts">
import { ref, onMounted, onUpdated, watch } from "vue";
const canvasRef = ref(null);
const props = defineProps<{
name?: string;
sprites?: Promise<[any, any]>;
}>();
onMounted(async () => {
const context = canvasRef.value.getContext("2d");
const [j, i] = await props.sprites;
const data = j[props.name];
context.drawImage(i, data.x, data.y, data.width, data.height, 0,0, 38, 38)
});
</script>

<template>
<canvas ref="canvasRef" width="38" height="38"></canvas>
</template>

<style scoped>
canvas {
width: 19px;
height: 19px;
}
</style>

0 comments on commit a5db640

Please sign in to comment.