maplibre gl compare

Maplibre GL Compare

Wischen und synchronisieren Sie zwischen zwei Maplibre -Karten. Dieses Plugin wurde ursprünglich für MAPBOX (https://github.com/mapbox/mapbox-gl-compare) entwickelt und wurde nach MapLiBre migriert, nachdem MapBox seine Lizenz geändert hat.

Codebeispiel

Beispiele

Volles Beispiel ohne die Notwendigkeit eines Tokens

 < ! DOCTYPE html >
< html >
  < head >
    < meta charset = "utf-8" / >
    < title > Swipe between maps < / title >
    < meta
      name = "viewport"
      content = "initial-scale=1,maximum-scale=1,user-scalable=no"
    / >
    < script src = "../.env" > < / script >
    < script src = "https://unpkg.com/[email protected]/dist/maplibre-gl.js" > < / script >
    < link
      href = "https://unpkg.com/[email protected]/dist/maplibre-gl.css"
      rel = "stylesheet"
    / >
    < style >
      body {
        margin : 0 ;
        padding : 0 ;
      }

      #map {
        position : absolute ;
        top : 0 ;
        bottom : 0 ;
        width : 100 % ;
      }
    < / style >
  < / head >

  < body >
    < style >
      body {
        overflow : hidden ;
      }

      body * {
        - webkit - touch - callout : none ;
        - webkit - user - select : none ;
        - moz - user - select : none ;
        - ms - user - select : none ;
        user - select : none ;
      }

      .map {
        position : absolute ;
        top : 0 ;
        bottom : 0 ;
        width : 100 % ;
      }
    < / style >
    < script src = "maplibre-gl-compare.js" > < / script >
    < link rel = "stylesheet" href = "maplibre-gl-compare.css" type = "text/css" / >
    < div id = "comparison-container" >
      < div id = "before" class = "map" > < / div >
      < div id = "after" class = "map" > < / div >
    < / div >
    < script >
      var beforeMap = new maplibregl.Map( {
        container : "before" ,
        style : "https://demotiles.maplibre.org/style.json" ,
        center : [ 7.221275 , 50.326111 ] ,
        zoom : 5 ,
      } );

      var afterMap = new maplibregl.Map( {
        container : "after" ,
        style :
          "https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json" ,
        center : [ 7.221275 , 50.326111 ] ,
        zoom : 5 ,
      } );

      // A selector or reference to HTML element
      var container = "#comparison-container";

      var map = new maplibregl.Compare(beforeMap, afterMap, container, {
        // Set this to enable comparing two maps by mouse movement:
        // m ousemove: true
      } );
    < / script >
  < / body >
< / html > 

Volles Beispiel mit dem Bedarf eines Tokens

 < ! DOCTYPE html >
< html >
  < head >
    < meta charset = "utf-8" / >
    < title > Swipe between maps < / title >
    < meta
      name = "viewport"
      content = "initial-scale=1,maximum-scale=1,user-scalable=no"
    / >
    < script src = "../.env" > < / script >
    < script src = "https://unpkg.com/[email protected]/dist/maplibre-gl.js" > < / script >
    < link
      href = "https://unpkg.com/[email protected]/dist/maplibre-gl.css"
      rel = "stylesheet"
    / >
    < style >
      body {
        margin : 0 ;
        padding : 0 ;
      }

      #map {
        position : absolute ;
        top : 0 ;
        bottom : 0 ;
        width : 100 % ;
      }
    < / style >
  < / head >

  < body >
    < style >
      body {
        overflow : hidden ;
      }

      body * {
        - webkit - touch - callout : none ;
        - webkit - user - select : none ;
        - moz - user - select : none ;
        - ms - user - select : none ;
        user - select : none ;
      }

      .map {
        position : absolute ;
        top : 0 ;
        bottom : 0 ;
        width : 100 % ;
      }
    < / style >
    < script src = "maplibre-gl-compare.js" > < / script >
    < link rel = "stylesheet" href = "maplibre-gl-compare.css" type = "text/css" / >
    < div id = "comparison-container" >
      < div id = "before" class = "map" > < / div >
      < div id = "after" class = "map" > < / div >
    < / div >
    < script >
      var beforeMap = new maplibregl.Map( {
        container : "before" ,
        style :
          "https://api.maptiler.com/maps/hybrid/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL" ,
        center : [ 7.221275 , 50.326111 ] ,
        zoom : 15 ,
      } );

      var afterMap = new maplibregl.Map( {
        container : "after" ,
        style :
          "https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL" ,
        center : [ 7.221275 , 50.326111 ] ,
        zoom : 15 ,
      } );

      // A selector or reference to HTML element
      var container = "#comparison-container";

      var map = new maplibregl.Compare(beforeMap, afterMap, container, {
        // Set this to enable comparing two maps by mouse movement:
        // m ousemove: true
      } );
    < / script >
  < / body >
< / html >

Verwendung

 var beforeMap = new maplibregl . Map ( {
container : "before" ,
style : "https://demotiles.maplibre.org/style.json" ,
center : [ 7.221275 , 50.326111 ] ,
zoom : 5 ,
} ) ;

var afterMap = new maplibregl . Map ( {
container : "after" ,
style :
    "https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json" ,
center : [ 7.221275 , 50.326111 ] ,
zoom : 5 ,
} ) ;

// A selector or reference to HTML element
var container = '#comparison-container' ;

var map = new maplibregl . Compare ( beforeMap , afterMap , container , {
  mousemove : true , // Optional. Set to true to enable swiping during cursor movement.
  orientation : 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
} ) ;

Methoden

 compare = new maplibregl . Compare ( beforeMap , afterMap , container , {
  mousemove : true , // Optional. Set to true to enable swiping during cursor movement.
  orientation : 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
} ) ;

// Get Current position - this will return the slider's current position, in pixels
compare . currentPosition ;

// Set Position - this will set the slider at the specified (x) number of pixels from the left-edge or top-edge of viewport based on swiper orientation
compare . setSlider ( x ) ;

//Listen to slider movement - and return current position on each slideend
compare . on ( 'slideend' , ( e ) => {
  console . log ( e . currentPosition ) ;
} ) ;

//Remove - this will remove the compare control from the DOM and stop synchronizing the two maps.
compare . remove ( ) ; 

Live -Beispiele

Vergleichen Sie Hybrid mit Straßen

Vergleichen Sie Swisstopo mit demotilen

Installation

Einheimisch

Fügen Sie Tags hinzu, auf denen maplibre-gl-compare nach dem Hinzufügen maplibre-gl zu Ihrer Website hinzugefügt wird:

 <!-- MapLibre GL -->
< link href =" https://unpkg.com/[email protected]/dist/maplibre-gl.css " rel =' stylesheet ' />
< link href =" maplibre-gl-compare.css " rel =' stylesheet ' />

< script src =" https://unpkg.com/[email protected]/dist/maplibre-gl.js " > </ script >
< script src =" maplibre-gl-compare.js " > </ script >

Knoten

Motivation

Dieses Projekt ermöglicht es, zwei Karten leicht zu vergleichen.

API -Referenz

API -Referenz

Fehlerberichte und Feature -Anfragen

Bitte verwenden Sie den Ausgabe -Tracker, um Fehler oder Dateifunktionsanfragen zu melden.

Lizenz

ISC © MAPLIBRE © MAPBOX