LoginSignup
2

More than 1 year has passed since last update.

Leaflet で circleMarker を手前側に表示

Last updated at Posted at 2017-08-23

こんにちは。
Leaflet で GeoJSON データなどを表示させる際に、circleMarker が手前側に来るように表示させました。pane を指定する方法です1

map.jpg

なお、指定しない場合には:

map2.jpg

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
</body>
<script>
var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([50.16, 2.3], 9);

var geojson = L.layerGroup([
    L.marker([50.16, 2.3]),  // "Point"
    L.marker([50.20, 2.3]),  // "Point"
    L.polyline([[50.16, 2.1], [50.16, 2.5]]),  // "LineString"
    L.polyline([[50.20, 2.1], [50.20, 2.5]]),  // "LineString"
]).toGeoJSON();

<!-- https://stackoverflow.com/questions/39767499/how-to-set-the-zindex-layer-order-for-geojson-layers -->
map.createPane("pane620").style.zIndex = 620;

var circleMarker = function(feature, latlng) {
    return new L.CircleMarker(latlng, {
        pane: "pane620",
        radius: 4,
        color: "#ff8",
        fillColor: "#f20",
        fillOpacity: 1,
    })
    .bindPopup("marker in pane620")
    .bindTooltip("tooltip").openTooltip();
};

L.geoJson(geojson, {pointToLayer: circleMarker}).addTo(map);

</script>
</html>

  1. これは "How to set the zIndex layer order for geoJson layers?" (stackoverflow) の中の方法を参考にしました。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2