Skip to content

Instantly share code, notes, and snippets.

@trescube

trescube/mapping_workshop_dynamic_libraries.html

Last active August 13, 2018 14:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trescube/82531b239a219e9ccac74c31c3ae0761 to your computer and use it in GitHub Desktop.
Save trescube/82531b239a219e9ccac74c31c3ae0761 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mapping_workshop_dynamic_libraries.html
<!DOCTYPE html>
<html>
<head>
<title>Delaware Mapping Workshop - Libraries</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
const dataUrl = 'https://opendata.arcgis.com/datasets/b507d4e7337d446481b38aa5412efebb_0.geojson';
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.1172707, lng: -75.4815594},
zoom: 9
});
map.data.loadGeoJson(dataUrl);
map.data.setStyle(function (feature) {
let icon;
// use a different icon depending on the type of library
switch (feature.getProperty('DESIGNATIO')) {
case 'Academic/School':
icon = 'https://cdn1.iconfinder.com/data/icons/school-outline-hand-drawn/70/icon_sets_school_outline_hand_drawn_iconfinder-01-24.png'
break;
case 'Special':
icon = 'https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519652-156_Library-24.png';
break;
case 'Public':
icon = 'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_local_library_48px-24.png';
break;
}
// name of library is in NAME property
return {
icon: icon
// add title property here
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR API KEY>
&callback=initMap"
></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment