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. SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-007-表单验证@Valid、Error

    一. Starting with Spring 3.0, Spring supports the Java Validation API in Spring MVC . No extra config ...

  2. 2013年最受欢迎的16个HTML5 WordPress主题

    本文中,我整理了16个最新.最受欢迎的WordPress主题,它们一致的特征是支持HTML5, 它们秉承最佳设计理念以及最新的流行趋势,将它们归纳与此,希望对喜欢HTML5,准备用WordPress做 ...

  3. 使用Visual Studio进行单元测试

    一.使用Visual Studio进行单元测试的几个建议 1.先写单元测试(依我愚见,应该是接口先行,如果有的话) -> 测试失败 -> 以最小的改动(即编写实际代码)使测试通过(而在VS ...

  4. jquery的小插件（按钮抖动）——衍生QQ窗口抖动

    1.抖动的按钮 效果预览:http://runjs.cn/detail/tyx8dbag <script type="text/javascript"> //shake ...

  5. OAuth 的权限问题与信息隐忧

    核心提示:以 QQ 登陆和微博登陆为代表的“一键登陆”背后不仅仅是登陆这么简单,它还默认获取了你的其他隐私资料和账号的部分使用权限,我们在享受便利的同时一定不要忘记保护好我们的个人信息安全. 去年3Q ...

  6. HDU 1518

    思路:从第一个数开始搜索,将其和与边长比对,相等则计数+1,计数达到3的时候说明可以组成,因为剩下那条必与边长相等,搜索过程注意剪枝,若某个数已被加入边长则不能重复计算,应将其标记,另外应在每一层递归 ...

  7. We're Hiring A Software Tester

    测试人员的基本修养: 代码编写,不可或缺 乔布斯说:Design is not just what it looks like and feel like,design is how it works ...

  8. SAE网站搭建（1）

    用了半天时间,把Django的基本结构同步到SAE上了,里边比较麻烦的地方如下: 1. 数据库的同步; SAE用的是SQL数据库,默认使用下面的用户名.密码等变量(SAE为我们做了很多工作) 首先需要 ...

  9. 【libsvm学习】

    参考: http://www.cnblogs.com/bigshuai/articles/2883256.html http://www.cnblogs.com/tornadomeet/archive ...

  10. mysql 5.5 中的示例数据库 employees

    http://dev.mysql.com/doc/employee/en/employees-installation.html