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. 解决Eclipse乱码的办法

    如果在项目中,已经配置了过滤器等各种解决编码问题方法,但是始终解决不了问题,那种考虑下修改eclipse环境本身的编码问题. 在Eclipse中导入新的项目的时候,会遇到乱码的问题,而乱码的问题主要集 ...

  2. 汇编 db,dw,dd的区别

    db定义字节类型变量,一个字节数据占1个字节单元,读完一个,偏移量加1 dw定义字类型变量,一个字数据占2个字节单元,读完一个,偏移量加2 dd定义双字类型变量,一个双字数据占4个字节单元,读完一个, ...

  3. C#中的WebBrowser控件加载ActiveX插件

    C#中WebBrowser控件,将项目输入更改为x86输出,在页面打开时即可自动加载ActiveX控件

  4. Oracle 常用符号CHR

    select  chr(92)||chr(102) from dual; \f select  chr(92)||chr(110) from dual; \n select  chr(92)||chr ...

  5. Android开发之PackageManager类

    PackageManger,可以获取到手机上所有的App,并可以获取到每个App中清单文件的所有内容. 设置应用程序版本号在应用程序的manifest文件中定义应用程序版本信息.2个必须同时定义的属性 ...

  6. 一个TextView使用不同的颜色

    一个TextView使用不同的颜色: textview中首先需要已经有内容了 public static void ColorFormatTextView(TextView tv,int color, ...

  7. 修改ruby gem源为ruby.taobao.org

    由于网络原因,导致从rubygems.org下载gem文件较慢或者间歇性的连接失败,所以可以修改gem源为ruby.taobao.org.具体可以用 gem install rails -V 来查看执 ...

  8. 多线程模式之MasterWorker模式

    多线程模式之MasterWorker模式 Master-Worker模式的核心思想是,系统由两类进程协作工作:Master进程和Worker进程.Master进程负责接收和分配任务,Worker进程负 ...

  9. C#类方法声明where的用法

    where 子句用于指定类型约束,这些约束可以作为泛型声明中定义的类型参数的变量. 1.接口约束. 例如,可以声明一个泛型类 MyGenericClass,这样,类型参数 T 就可以实现 ICompa ...

  10. 微软的无限存储空间－OneDrive

    10 月 28 日消息,微软今天宣布为所有 Office 365 的用户提供无上限的云存储服务,也就是 OneDrive 存储空间将从目前的 1TB 变成无上限,而且无需支付额外费用.这意味着曾经困扰 ...