Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

MapboxGL & D3.js - point

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>MapboxGL & D3.js - point</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>    
html, body, #wrapper {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:0px;  
}
#map { 
  position:relative; 
  width: 100%;
  height: 100%;
  margin: auto auto;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="map"></div>    
</div>

<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<script>
d3.json("landprice.geojson").then(mapDraw);
    
    
function mapDraw(geojson){    
    //mapboxgs トークン
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpbWl6dSIsImEiOiJjam95MDBhamYxMjA1M2tyemk2aHMwenp5In0.i2kMIJulhyPLwp3jiLlpsA'
    
    //Setup mapbox-gl map
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v8',
        center: [139.0032936, 36.3219088　],
        zoom: 14,  
    });
    
    map.addControl(new mapboxgl.NavigationControl());
    
    
    var container = map.getCanvasContainer()
    var svg = d3.select(container).append("svg")
    
    var circle = svg.selectAll("circle")
        .data(geojson.features)
        .enter()
        .append("circle")
        .attr("r", 10)
        .attr("stroke", "black")
        .attr("stroke-width", 2)
        .attr("fill", "red")
        .attr("opacity", 0.7)
    
    function update() {
        circle
        .attr("cx", function(d) { return project(d.geometry.coordinates).x; })
        .attr("cy", function(d) { return project(d.geometry.coordinates).y; })
    }
    
    //マップイベントにアップデート関数を束縛
    map.on("viewreset", update)
    map.on("move", update)
    
    //初期レンダリング
    update()
        
    function project(d) {
        return map.project(new mapboxgl.LngLat(+d[0], +d[1]));
    }
}

</script>
</body>

https://unpkg.com/d3@5.0.0/dist/d3.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js