Old school D3 from simpler times

All examples By author By category About

2947721120

Full window Github gist

Leaflet Material Controls

<html>
<head>
<meta charset=utf-8 />
<title>一个简单的地图</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="https://storage.c2cbc.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://font.c2cmalls.com/icon?family=Material+Icons">
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css' rel='stylesheet'>

<style>
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
  }

.leaflet-bar-mdl.leaflet-control {
    margin: 8px 16px 8px 16px;
  }
  .leaflet-bar-mdl.leaflet-control button {
    margin-bottom: 16px;
    display: block;
  }
  @media (min-width: 840px) {
    .leaflet-bar-mdl.leaflet-control {
      margin: 24px 24px 0 24px;
    }
  }

</style>
</head>
<body>
<div id='map'></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<script src="https://storage.c2cbc.com/code.getmdl.io/1.0.0/material.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.min.js'></script>

<script>
  L.Control.Attribution.prototype.options.position = "bottomleft";
  
  L.mapbox.accessToken = 'pk.eyJ1IjoiY3RpcHBldHQiLCJhIjoiS3lpTnN4MCJ9.YG_uH8r7IgwgcSWEPYROMA';
  var map = L.mapbox.map('map', null ,{zoomControl: false, attributionControl: true})
      .setView([40, -74.50], 9);

var layers = {
      Streets: L.mapbox.tileLayer('mapbox.streets'),
      Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
      Satellite: L.mapbox.tileLayer('mapbox.satellite')
  };
  layers.Streets.addTo(map);

</script>
</body>
</html>

xxxxxxxxxx
 
<html>
<head>
<meta charset=utf-8 />
<title>一个简单的地图</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="https://storage.c2cbc.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://font.c2cmalls.com/icon?family=Material+Icons">
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css' rel='stylesheet'>
​
<style>
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
  }
​
  .leaflet-bar-mdl.leaflet-control {
    margin: 8px 16px 8px 16px;
  }
  .leaflet-bar-mdl.leaflet-control button {
    margin-bottom: 16px;
    display: block;
  }
  @media (min-width: 840px) {
    .leaflet-bar-mdl.leaflet-control {
      margin: 24px 24px 0 24px;
    }
  }
​
</style>
</head>
<body>
<div id='map'></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<script src="https://storage.c2cbc.com/code.getmdl.io/1.0.0/material.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.min.js'></script>
<!-- <script src="/Users/Chris/Documents/Projects/aeroster/dist/js/leaflet-material-min.js"></script> -->
<script>
  L.Control.Attribution.prototype.options.position = "bottomleft";
  
  L.mapbox.accessToken = 'pk.eyJ1IjoiY3RpcHBldHQiLCJhIjoiS3lpTnN4MCJ9.YG_uH8r7IgwgcSWEPYROMA';
  var map = L.mapbox.map('map', null ,{zoomControl: false, attributionControl: true})
      .setView([40, -74.50], 9);
​
  var layers = {
      Streets: L.mapbox.tileLayer('mapbox.streets'),
      Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
      Satellite: L.mapbox.tileLayer('mapbox.satellite')
  };
  layers.Streets.addTo(map);
​
​
</script>
</body>
</html>
    

Updated missing url https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js to https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.min.js

https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js

https://storage.c2cbc.com/code.getmdl.io/1.0.0/material.min.js

https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js