<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>Leaflet Demo</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>

</head>

<body>

<div id="map"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

</body>

</html>
$.getJSON('//jsbin.com/qogati/1.js', renderMap);

function renderMap (geoData) {

  var map = L.map('map');

  var osm = '//{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png';

  L.tileLayer(osm).addTo(map);

  var geoJson = L.geoJson(geoData, {

    style: function (feature) {

      return {

        weight: 1,

        opacity: 0.5,

        color: '#00ff00',

        fillColor: '#00dd00',

        fillOpacity: 0.2

      }

    }

  }).addTo(map);

  map.fitBounds(geoJson.getBounds());

}

[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON的更多相关文章

  1. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  2. 使用leaflet绘制geoJson中国边界

    绘制中国边界 代码如下: function drawChina() { //设置样式 var myStyle = { "color": "#00f", &quo ...

  3. JavaScript Source Maps浅析

    阅读目录 有用的链接 Link: 原文链接 译文开始: 对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩.但是当你需要调试这些压缩文件中的代码的时候,会发生什么?可能会是一场噩梦.但 ...

  4. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  5. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  6. Leaflet客户端学习笔记

    Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...

  7. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

  8. Google Maps API Web Services

    原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...

  9. The tilde ( ~ ) operator in JavaScript

    From the JavaScript Reference on MDC, ~ (Bitwise NOT) Performs the NOT operator on each bit. NOT a y ...

随机推荐

  1. EJB理解

    1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...

  2. addlinkedserver

    http://blog.sina.com.cn/s/blog_5321db9d0100f89g.html --创建链接服务器 exec sp_addlinkedserver  'ITSV ', ' ' ...

  3. BZOJ_1007_ [HNOI2008]_水平可见直线_(单调栈+凸包)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1007 给出一些直线,沿着y轴从上往下看,能看到多少条直线. 分析 由于直线相交,会遮挡住一些直 ...

  4. 全新 D 系列虚拟机型号

    Kenaz KwaAzure计算运行时项目经理 今天,我们宣布将发布名为D系列的Windows Azure 新VM型号,并支持虚拟机和 Web/Worker Role.这些虚拟机型号最多可以提供 11 ...

  5. Oracle 新增表空间文件

    ALTER TABLESPACE users ADD DATAFILE 'D:/oracle/oradata/orcl/users.dbf' SIZE 500M AUTOEXTEND ON NEXT ...

  6. EF架构随心所欲打造属于你自己的DbModel【转】

    前言 我们都知道EF可以生成Dbmodel,系统生成的Model有时候并不是我们想要的,如何我们要生成自己的Model,那么久需要我们手动的去修改T4模版,T4是对“Text Template Tra ...

  7. [未解出,hzwer]挖掘机

    挖掘机(dig.*) 背景 附中机房谁最虚?高二一班***!感觉很顺,是吧? 题目描述 今天,丧尸czy开着挖掘机去上学(……).但是他发现他的mz满天下,所以一路上他碰到了好多他的mz.一开始他以1 ...

  8. 【JS】Intermediate1:The DOM

    1.DOM(The Document Object Model) A way to manipulate the structure and style of an HTML page. It rep ...

  9. ArrayLLis 线程不安 实验

    这段代码演示了ArrayList的线程不安全,我让3个线程分别对list加入300个字符串,最后的arr的大小为800多,大家可以测试一下,我的一次是898,一次是897,同时还学了join的用法 i ...

  10. shell 加法

    shell 加法 i=$i+1 是在i的变量值后加上字符串'+1' 总结:其他语言中的$i++操作在shell中表示如下:#!/bin/bash n=1;echo -n "$n " ...