Contents

<style>
body { margin: 0; padding: 0; }
#map-container { position: relative; top: 0; bottom: 0; width: 100%; };
 
#marker {
    background-image: url('..images/rocket.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
 
.mapboxgl-popup {
    max-width: 200px;
}
</style>
<div class="intro {{ include.style.header.joined }} {{ include.style.header.color }}">
    <h2 class="major">{{ include.header.title }}</h2>
    <p>{{ include.header.description }}</p>
</div>
<div id='map-container'></div>
<script src="{{ 'assets/js/mapbox-gl.js' | absolute_url }}" /></script>
<script defer>
mapboxgl.accessToken = "{{ include.data.token }}";
var map = new mapboxgl.Map({
    container: "map-container",
    style: "{{ include.data.style }}",
    center: [{{ include.data.center.longitude | default: 0.0 }}, {{ include.data.center.latitude | default: 0.0 }}],
    zoom: {{ include.data.zoom | default: 1 }}
});

var data_points = {{ include.content | strip_html }}

map.on('load', function () {

    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": data_points
        },
        "layout": {
            // get the icon name from the source's "icon" property
            // concatenate the name to get an icon from the style's sprite sheet
            "icon-image": ["concat", ["get", "icon"], "-15"],
            // get the title name from the source's "title" property
            "text-field": ["get", "name"],
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });

});
</script>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
jekyll-theme-ethereal-0.3.3	_includes/panel_map.html