Skip to content

Instantly share code, notes, and snippets.

@davidrleonard

davidrleonard/1-repeat-markers.html

Last active March 27, 2017 17:43
Show Gist options
  • Save davidrleonard/ee9e39eb428771b53a83915cc3b1944f to your computer and use it in GitHub Desktop.
Save davidrleonard/ee9e39eb428771b53a83915cc3b1944f to your computer and use it in GitHub Desktop.
Download ZIP
Create px-map markers with a dom-bind and dom-repeat
Raw
1-repeat-markers.html
<!--
In this example, we use a template dom-repeat to insert multiple markers into a map
from an array of simple objects. This is a way to use markers and other components
without feeding in a complex blob of GeoJSON.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map 1 Demo -- Simple Map</title>
<!-- Load webcomponents polyfill -->
<script src="../webcomponentsjs/webcomponents.min.js"></script>
<!-- We need to import Polymer on this page to use `dom-bind` and `dom-repeat` -->
<link rel="import" href="../polymer/polymer.html" />
<!-- Import px-map subcomponents -->
<link rel="import" href="../px-map/px-map.html" />
<link rel="import" href="../px-map/px-map-tile-layer.html" />
<link rel="import" href="../px-map/px-map-marker-static.html" />
</head>
<body>
<style>
px-map {
width: 600px;
height: 400px;
}
</style>
<template is="dom-bind" id="demo">
<px-map zoom="1">
<px-map-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></px-map-tile-layer>
<template is="dom-repeat" items="{{markers}}">
<px-map-marker-static lat="{{item.lat}}" lng="{{item.lng}}" type="{{item.type}}"></px-map-marker-static>
</template>
</px-map>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var template = document.querySelector('#demo');
var markers = [
{ lat: 12, lng: 14, type: 'important' },
{ lat: 15, lng: 19, type: 'info' }
];
template.set('markers', markers);
});
</script>
</body>
</html>
Raw
2-repeat-markers-popup.html
<!--
This example extends `1-repeat-markers.html` to also bind popups to the dynamically
created markers.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map 1 Demo -- Simple Map</title>
<!-- Load webcomponents polyfill -->
<script src="../webcomponentsjs/webcomponents.min.js"></script>
<!-- We need to import Polymer on this page to use `dom-bind` and `dom-repeat` -->
<link rel="import" href="../polymer/polymer.html" />
<!-- Import px-map subcomponents -->
<link rel="import" href="../px-map/px-map.html" />
<link rel="import" href="../px-map/px-map-tile-layer.html" />
<link rel="import" href="../px-map/px-map-marker-static.html" />
<link rel="import" href="../px-map/px-map-popup-info.html" />
</head>
<body>
<style>
px-map {
width: 600px;
height: 400px;
}
</style>
<template is="dom-bind" id="demo">
<px-map zoom="1">
<px-map-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></px-map-tile-layer>
<template is="dom-repeat" items="{{markers}}">
<px-map-marker-static lat="{{item.lat}}" lng="{{item.lng}}" type="{{item.type}}">
<px-map-popup-info title="{{item.title}}" description="{{item.description}}"></px-map-popup-info>
</px-map-marker-static>
</template>
</px-map>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var template = document.querySelector('#demo');
var markers = [
{ lat: 12, lng: 14, type: 'important', title: 'Location #1', description: 'Lorem ipsum dot sit amet' },
{ lat: 15, lng: 19, type: 'info', title: 'Location #1', description: 'Lorem ipsum dot sit amet' }
];
template.set('markers', markers);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment