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. TSS 任务状态段

    TSS(任务状态段) 1 什么是TSS TSS 全称task state segment,是指在操作系统进程管理的过程中,任务(进程)切换时的任务现场信息.  2 TSS工作细节 TSS在任务切换过程 ...

  2. [Gauss]POJ3185 The Water Bowls

    题意:反正就是要给的一串01的变成全0 能影响自己和左右 最少需要几步 01方程组 异或解 ][]; // 增广矩阵 ]; // 解 ]; // 标记是否为自由未知量 int n; void debu ...

  3. android 设备唯一码的获取，Cpu号，Mac地址

    开发Android应用中,我们常常需要设备的唯一码来确定客户端. Android 中的几中方法,使用中常常不可靠 1. DEVICE_ID 假设我们确实需要用到真实设备的标识,可能就需要用到DEVIC ...

  4. 一个灵巧的Delphi多播实事件现方案

    一个灵巧的Delphi多播实现方案.必须是支持泛型的Delphi版本.也就是Delphi2009以后.强烈建议用DelphiXE. 用法就是例如写一个Class指定一个Event,触发的时候会通知多个 ...

  5. 关于linq

    其实从08年的时候,我就已经知道了linq,开始的时候也并没有注意,我说过很多次,我不是一个有心人,只是在新建立一个工程的时候,程序会自动引入linq这个玩意,怀着好奇的心去找了点资料,有的时候,看一 ...

  6. CSS+DIV之强化background属性

    1.背景颜色属性(background-color),设定背景颜色＝html中bgcolor属性.我来写一个红色背景的body,(也可以定义某个特定区域) 示例写法:body {} 2.背景图片属性( ...

  7. jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  8. c# 模拟http post 带cookie

    下面的代码是自动向cnblogs中的小组发帖.........注意小组ID,主题ID,小组类型 首先采用firebug分析到发帖时的post地址以及参数,其中在headers中包含了cookies,把 ...

  9. 016专家视图测试脚本开发_utility对象

    utility对象(1)这个例子是:Extendtest使用Extend对象加载DLL,我们可以使用它来丰富windows api函数,能够编写更为强大和灵活的测试代码 实例代码: '声明FindWi ...

  10. 提升WI-FI信号强度的10大方法

    原文链接:http://server.51cto.com/Net-402889.htm