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. 定时显示提示控件 TToolTip

    转载过来的,文章出自: http://www.delphifans.com/infoview/Article_3640.html {    修改者:ghs    日期:20071218    功能:在 ...

  2. Java之sleep和wait的区别

    这个问题在面试线程方面的知识时,基本上属于必问的问题.因此这里有必要做一个较为详细的总结. 区别一 首先需要明白的是这两个方法根本来自不同的类,sleep来自Thread,wait来自Object类. ...

  3. Asp.net性能优化技巧

    [摘 要] 我只是提供我几个我认为有助于提高写高性能的asp.net应用程序的技巧,本文提到的提高asp.net性能的技巧只是一个起步,更多的信息请参考<Improving ASP.NET Pe ...

  4. JavaScript里的类和继承

    JavaScript与大部分客户端语言有几点明显的不同: JS是 动态解释性语言,没有编译过程,它在程序运行过程中被逐行解释执行JS是 弱类型语言,它的变量没有严格类型限制JS是面向对象语言,但 没有 ...

  5. 使用 jQuery 进行前端验证 -- 1

    如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...

  6. ruby编程语言-学习笔记4（第4章 表达式和操作符）

    4.6.9 范围  Flip-Flops:  ..和... ..和... 操作符不是基于方法的,无法重定义.(优先级比较低) x+1 .. x*x   #可以认为是x+1 至 x*x 的范围 因为操作 ...

  7. struct ifreq结构体与ip,子网掩码，网关等信息

    总结一下,今天学习的关于通过socket,ioctl来获得ip,netmask等信息,其中很多内容参照了很多网上的信息,我会一一列出的 我用的这个函数,就是下面这个函数,其中的有一些全局变量,很好懂, ...

  8. [King.yue]EXT.NET TextFieldFor添加正则表达式

    EXT.NET TextFieldFor添加正则表达式以及提示用法 例:Html.Y().TextFieldFor().Regex("此处添加正则表达式") .InvalidTex ...

  9. selenium 处理浏览器多窗口

    测试过程中,会弹出一些子窗口,并且有可能在多个窗口之间切换 必须要获取每个窗口的唯一标识符切换到该窗口,才能对该窗口的元素进行操作 首先,获取每个窗口的唯一标识符,然后以及和的形式返回 var mai ...

  10. 【HTML】Advanced2：Conditional Comments

    1.try and figure out what is sensible for you to support. Are your web site visitors likely to be us ...