Leaflet makes creating maps in the browser dead simple. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying

// create a map in the "map" div, set the view to a given place and zoom

var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup

L.marker([51.5, -0.09]).addTo(map)

    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')

    .openPopup();

var circle = L.circle([51.508, -0.11], 500, {

    color: 'red',

    fillColor: '#f03',

    fillOpacity: 0.5

}).addTo(map);

var polygon = L.polygon([

    [51.509, -0.08],

    [51.503, -0.06],

    [51.51, -0.047]

]).addTo(map);
<!DOCTYPE html>

<html>

<head>

    <meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" />

    <meta charset="utf-8">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>

</head>

<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

<div id="map" style="width: 100%; height: 630px;"></div>

</body>

</html>

[Javascript] Get Started with LeafletJS Mapping的更多相关文章

  1. javascript编程： JSON， Mapping, 回调

    使用 Javascript  编程, 组合使用 JSON 数据格式,Mapping 和回调技术, 可以产生很强的表达效果. 在实际工作中, 总会有数据汇总的需求. 比如说, 取得了多个 device ...

  2. JavaScript Garden

    Objects Object Usage and Properties Everything in JavaScript acts like an object, with the only two ...

  3. JSP 资源与网站

    JS文件说明 1.1 jquery 描述:一个兼容多浏览器的javascript框架,可以操作文档对象.选择DOM元素.制作动画效果.事件处理.使用Ajax以及其他功能. 文件路径:Commonjs/ ...

  4. Flask框架搭建一个日程表

    目录 前言 项目介绍 技术栈 Flask Web开发流程 一.搭建环境 1.1: 创建虚拟环境 1.2: 安装依赖包 1.3: 创建依赖包列表文件 1.4: 测试hello word 二.应用程序开发 ...

  5. 解决springmvc拦截器拦截静态资源的两种方式

    1.是采用<mvc:default-servlet-handler />,(一般Web应用服务器默认的Servlet名称是"default",所以这里我们激活Tomca ...

  6. ArcGIS API for JavaScript 4.2学习笔记[3] 官方第二章Mapping and Views概览与解释

    目录如下: 连接:第二章 Mapping and Views 根据本人体会, [这一章节主要是介绍地图(Map)和视图(View)的.] 其中,Get started with MapView(2D) ...

  7. javascript mapping

    1. 使用var定义的变量是声明,没有使用var是给window或者gloable对象增加属性. 比如var a = 10; //定义一个变量名称为a b= 20; // 给window对象增加一个属 ...

  8. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  9. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

随机推荐

  1. http://www.ruanyifeng.com/blog/2011/09/restful

    http://www.ruanyifeng.com/blog/2011/09/restful

  2. [jobdu]二维数组中的查找

    http://ac.jobdu.com/problem.php?pid=1384 基本思路很简单,从最右上角找起. 九度的OJ做得还是不太行啊.必须要int main()才行,这道题时间卡得太紧,用c ...

  3. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-006-给bean运行时注入值(Environment,Property文件)

    一. 直观的给bean注入值如下: @Bean public CompactDisc sgtPeppers() { return new BlankDisc( "Sgt. Pepper's ...

  4. ANDROID_MARS学习笔记_S01原始版_022_MP3PLAYER002_本地及remote标签

    一.简介 1.在main.xml中用TabHost.TabWidget.FrameLayout标签作布局 2.在MainActivity中生成TabHost.TabSpec,调用setIndicato ...

  5. Cocos2d-x CCEditBox & CCTextFieldTTF

    下面简单记录一下如何Cocos2d-x中创建输入编辑框.在引擎中为我们提供了这样两个类:CCEditBox  和  CCTextFieldTTF. 一.CCEditBox ①这个类文件的位置 ②这个类 ...

  6. 【POJ】3076 Sudoku

    DLX第一题,模板留念. /* 3076 */ #include <iostream> #include <string> #include <map> #incl ...

  7. 【Python Network】分解DNS查询结果

    针对DNS查询records,通过NS.PTR.CNAME和MX类别不同,返回数据将包含另外主机名.为了解最终的IP地址,通过将返回信息分解.继续使用PyDNS获取详细信息. #! /usr/bin/ ...

  8. wzplayer,tlplayer支持ActiveX

    wzplayer2 for activeX最新谍报 1.支持wzplayer2所有功能 2.支持本地播放,网络播放,加密流播放. 3.支持变速不变调等等. 联系方式:weinyzhou86@gmail ...

  9. Hadoop中的各种排序

    本篇博客是金子在学习hadoop过程中的笔记的整理,不论看别人写的怎么好,还是自己边学边做笔记最好了. 1:shuffle阶段的排序(部分排序) shuffle阶段的排序可以理解成两部分,一个是对sp ...

  10. Hibernate: org.hibernate.exception.SQLGrammarException: could not insert: 错误

    最近在学习Java Web,今天刚接触Hibernate.学习的书籍是<轻量级Java EE企业应用实战(第3版)>.书中367页5.2.2中给予的Hibernate例子中的代码运行有以下 ...