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. LINQ TO SQL 怎样 执行存储过程并返回存储过程的临时表

    查了GOOGLE一下,这种办法可以解决 我的存储过程是这样的: CREATE procedure cal_month_dep_fast  @begdt datetime,@endt datetime ...

  2. Postman(API & HTTP请求调试插件)和Apizza fiddler

    http://blog.csdn.net/u011012932/article/details/51456263#comments

  3. Dagger 2: Step To Step

    文/iamwent(简书作者)原文链接:http://www.jianshu.com/p/7505d92d7748著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 假设你已经了解 依赖注 ...

  4. 简单的信誉算法 js处理

    $(document).ready(function(){ // 初始化 var credit = "{sh:$info.credit}"; var res = getCredit ...

  5. 安装db2 提示不是有效的win32应用程序?

    问题已经解决了,就是版本的问题.我在官网上下载的最新版本(10.5),网上说是最新的版本不支持xp系统,完了我下了9.7的版本,安装没有一点点问题

  6. 结构体 fseg_inode_t;

    typedef byte fseg_inode_t;

  7. PHP ‘asn1_time_to_time_t’函数内存损坏漏洞

    漏洞名称: PHP ‘asn1_time_to_time_t’函数内存损坏漏洞 CNNVD编号: CNNVD-201312-348 发布时间: 2013-12-18 更新时间: 2013-12-18 ...

  8. 【随笔】Linux & Shell & Minecraft

    官方的服务器依然会报 异常.[搁置] 准备再搭一次minecraft server,从官方的开始,毕竟是最简单的,只要有运行权限就够了. # 2015年12月16日 20:30:50 在阿里云租的虚拟 ...

  9. 【转】【教程】实现Virtualbox中的XP虚拟机和主机Win7之间的共享文件夹

    原文网址:http://www.crifan.com/add_share_folder_for_virtualbox_guest_xp_and_host_win7/ 已经实现了在主机Win7下,在Vi ...

  10. （转载） mysql中，option是保留字段么？

    (转载)http://book.77169.org/101/50364.htm update thread set active=0,option='lock',manager='书生' where ...