Published
Edited
May 1, 2020
1 fork
md `# markers`
html`<style>
body {
margin: 0;
padding: 0;
}
.marker {width:0; height:0;}
.marker span {
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
width: 30px;
height: 30px;
color:#fff;
background: #693;
border:solid 2px;
border-radius: 0 70% 70%;
box-shadow:0 0 2px #000;
cursor: pointer;
transform-origin:0 0;
transform: rotateZ(-135deg);
}
.marker b {transform: rotateZ(135deg)}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup {
max-width: 250px;
/font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
.map-overlay {
position: absolute;
width: 25%;
top: 0;
bottom: 0;
left: 0;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
max-height: 100%;
overflow: hidden;
}
.map-overlay fieldset {
display: none;
background: #ddd;
border: none;
padding: 10px;
margin: 0;
}
.map-overlay input {
display: block;
border: none;
width: 100%;
border-radius: 3px;
padding: 10px;
margin: 0;
}
.map-overlay .listing {
overflow: auto;
max-height: 100%;
}
.map-overlay .listing > * {
display: block;
padding: 5px 10px;
margin: 0;
}
.map-overlay .listing a {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
}
.map-overlay .listing a:last-child {
border: none;
}
.map-overlay .listing a:hover {
background: #f0f0f0;
</style>
`
viewof map ={
var container = html`
<div style="height:400px;" style="width:400px;" id='map'></div>`;
var content = html`
<style>
body {
margin: 0;
padding: 0;
}
.marker {width:0; height:0;}
.marker span {
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
width: 30px;
height: 30px;
color:#fff;
background: #693;
border:solid 2px;
border-radius: 0 70% 70%;
box-shadow:0 0 2px #000;
cursor: pointer;
transform-origin:0 0;
transform: rotateZ(-135deg);
}
.marker b {transform: rotateZ(135deg)}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup {
max-width: 250px;
/font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
.map-overlay {
position: absolute;
width: 25%;
top: 0;
bottom: 0;
left: 0;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
max-height: 100%;
overflow: hidden;
}
.map-overlay fieldset {
display: none;
background: #ddd;
border: none;
padding: 10px;
margin: 0;
}
.map-overlay input {
display: block;
border: none;
width: 100%;
border-radius: 3px;
padding: 10px;
margin: 0;
}
.map-overlay .listing {
overflow: auto;
max-height: 100%;
}
.map-overlay .listing > * {
display: block;
padding: 5px 10px;
margin: 0;
}
.map-overlay .listing a {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #404;
text-decoration: none;
}
.map-overlay .listing a:last-child {
border: none;
}
.map-overlay .listing a:hover {
background: #f0f0f0;
</style>
${container}<div class='map-overlay'>
<div id='feature-listing' class='listing'></div>
</div>`
yield content;
var map = container.value = new mapboxgl.Map({
container,
style: "mapbox://styles/mapbox/streets-v9",
center: [-96, 37.8],
zoom: 3
});
//geojson dei narker washinfgton e s. francisco
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.032, 38.913]
},
"properties": {
"title": "Mapbox",
"description": "Washington, D.C.",
"icon": {
"className": 'my-icon icon-sf', // class name to style
"html": '★', // add content inside the marker, in this case a star
"iconSize": null, // size of icon, use null to set the size in CSS
'marker-color': '#3bb2d0',
'marker-size': 'large',
'marker-symbol': 'commercial'
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox",
"description": "San Francisco, California",
"icon": {
"className": 'my-icon icon-sf', // class name to style
"html": '★', // add content inside the marker, in this case a star
"iconSize": null, // size of icon, use null to set the size in CSS
'marker-color': '#3bb2d0',
'marker-size': 'large',
'marker-symbol': 'commercial'
}
}
}
]
};
map.on('style.load', function (e) {
map.addSource("cities", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: geojson,
/*cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 40 // Radius of each cluster when clustering points (defaults to 50)
*/
});
map.addLayer({
"id": "unclustered-cities",
"type": "symbol",
"source": "cities",
/*"layout": {
//"text-field": "{point_count}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 12,
"icon-image": "monument-15"
},*/
"filter": ["!has", "point_count"],
"layout": {
"icon-image": "monument-15"
}
//"filter": ["all", "point_count", '#f28cb1']
});
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": ["-75.532965", "35.248018"]
},
"properties": {
"title": "Start",
"marker-symbol": "monument",
"marker-size": "small",
"marker-color": "#D90008"
}
}]
}
});
map.addLayer({
"id": "mk",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15", //but monument-15 works
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, -1.6],
"text-anchor": "top"
}
});
});
// add markers to map
geojson.features.forEach(function(marker, i) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
el.innerHTML = '<span><b>' + (i + 1) + '</b></span>'
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({
offset: 25
}) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
}
require("https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js")
require("https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js")
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken = "pk.eyJ1IjoiZ2VtbWVnIiwiYSI6ImNqemdtbHFlMTBnazUzbnBrMGl6Y2ozazIifQ.a39V4s3AOYKZElk56ydScg";
/*const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);*/
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
// console.log(href)
const href2="https://fonts.googleapis.com/css?family=Open+Sans";
document.head.appendChild(html`<link href=${href2} rel=stylesheet>`);
//const href3="https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css";
//document.head.appendChild(html`<link href=${href3} rel=stylesheet>`);
}
return gl;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
