cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix sample maps border and margins

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-26 16:12:20 +03:00
parent 862fe30438
commit 8f329343f5
5 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/css/screen.css
View File

@ -304,11 +304,13 @@ a.nodocs {
color: #bbb; color: #bbb;
} }
.container .map {
border: 1px solid #ccc;
margin: 1.5em 0;
}
#map { #map {
height: 320px; height: 320px;
border: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 34px;
/*box-shadow: 0px 0px 10px #ccc; /*box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0px 0px 10px #ccc; -moz-box-shadow: 0px 0px 10px #ccc;

6
examples/custom-icons.md
View File

@ -3,11 +3,11 @@ layout: tutorial
title: Markers With Custom Icons 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. 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 &rarr;](custom-icons-example.html) [View example on a separate page &rarr;](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); 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 ### Defining an icon class

2
examples/layers-control.md
View File

@ -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. 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 &rarr;](ayers-control-example.html) [View example on a separate page &rarr;](ayers-control-example.html)

8
examples/quick-start.md
View File

@ -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. 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 &rarr;](quick-start-example.html) [View example on a separate page &rarr;](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 ### 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: 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 ### 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: 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 ### 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: 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
View File

@ -11,7 +11,7 @@ It is built from the ground up to work efficiently on both desktop and mobile pl
{: .usedby} {: .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/) ... 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 &mdash; 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: 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 &mdash; 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: