fix sample maps border and margins
This commit is contained in:
parent
862fe30438
commit
8f329343f5
@ -304,11 +304,13 @@ a.nodocs {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.container .map {
|
||||
border: 1px solid #ccc;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 320px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 34px;
|
||||
|
||||
/*box-shadow: 0px 0px 10px #ccc;
|
||||
-moz-box-shadow: 0px 0px 10px #ccc;
|
||||
|
@ -3,11 +3,11 @@ layout: tutorial
|
||||
title: Markers With Custom Icons
|
||||
---
|
||||
|
||||
### Markers With Custom Icons
|
||||
## Markers With Custom Icons
|
||||
|
||||
In this tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map.
|
||||
|
||||
<div id="map" style="height: 220px; margin-bottom: 18px"></div>
|
||||
<div id="map" class="map" style="height: 220px"></div>
|
||||
|
||||
[View example on a separate page →](custom-icons-example.html)
|
||||
|
||||
@ -44,7 +44,7 @@ Now putting a marker with this icon on a map is easy:
|
||||
|
||||
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
|
||||
|
||||
<div id="map2" style="height: 220px; margin-bottom: 18px"></div>
|
||||
<div id="map2" class="map" style="height: 220px"></div>
|
||||
|
||||
### Defining an icon class
|
||||
|
||||
|
@ -7,7 +7,7 @@ title: Layer Groups and Layers Control
|
||||
|
||||
This tutorial will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map.
|
||||
|
||||
<div id="map" style="height: 250px; margin: 0 0 18px"></div>
|
||||
<div id="map" class="map" style="height: 250px"></div>
|
||||
|
||||
[View example on a separate page →](ayers-control-example.html)
|
||||
|
||||
|
@ -8,7 +8,7 @@ title: Quick Start Guide
|
||||
This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.
|
||||
|
||||
|
||||
<div id="map" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<div id="map" class="map" style="height: 180px"></div>
|
||||
|
||||
[View example on a separate page →](quick-start-example.html)
|
||||
|
||||
@ -41,7 +41,7 @@ Now you're ready to initialize the map and do some stuff with it.
|
||||
|
||||
### Setting up the map
|
||||
|
||||
<div id="map1" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<div id="map1" class="map" style="height: 180px"></div>
|
||||
|
||||
|
||||
Let's create a map of the center of London with pretty CloudMade tiles. First we'll initialize the map and set its view to our chosen geographical coordinates and a zoom level:
|
||||
@ -66,7 +66,7 @@ It's worth noting that Leaflet is provider-agnostic, meaning that it doesn't enf
|
||||
|
||||
### Markers, circles and polygons
|
||||
|
||||
<div id="map2" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<div id="map2" class="map" style="height: 180px"></div>
|
||||
|
||||
Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let's add a marker:
|
||||
|
||||
@ -91,7 +91,7 @@ Adding a polygon is as easy:
|
||||
|
||||
### Working with popups
|
||||
|
||||
<div id="map3" style="height: 180px; margin-bottom: 18px"></div>
|
||||
<div id="map3" class="map" style="height: 180px"></div>
|
||||
|
||||
Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:
|
||||
|
||||
|
2
index.md
2
index.md
@ -11,7 +11,7 @@ It is built from the ground up to work efficiently on both desktop and mobile pl
|
||||
{: .usedby}
|
||||
Used by: [Flickr](http://flickr.com/map) [foursquare](https://foursquare.com/) [Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/) [Meetup](http://www.meetup.com/) [Geocaching](http://geocaching.com) [StreetEasy](http://streeteasy.com/) [Nestoria](http://www.nestoria.co.uk) [City-Data.com](http://city-data.com) [CityMaps](http://www.citymaps.com) [Chartbeat](http://chartbeat.com/) [GIS Cloud](http://www.giscloud.com/) [skobbler](http://maps.skobbler.com/) ...
|
||||
|
||||
<div id="map"></div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
In this basic example, we create a map with <abbr title="Here we use the beautiful CloudMade tiles which require an API key (get one for free!), but Leaflet doesn't force you to — use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user