<!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. 【转】DCX （数独-八皇后问题）

    还没学会,先转了再说.. 出处:http://grenet.cnblogs.com/ 跳跃的舞者,舞蹈链(Dancing Links)算法--求解精确覆盖问题   精确覆盖问题的定义:给定一个由0-1 ...

  2. configure文件中判断某函数或库是否存在的一个方法

    echo " #include<stdio.h> #include<openssl/ssl.h> int main() { return 0; } " &g ...

  3. Java二维数组

    package com.test; public class Test { public static void main(String[] args) { // TODO Auto-generate ...

  4. laravel 模板 blade

    控制器布局 在Laravel框架中使用模板的一种方法就是通过控制器布局.通过在控制器中指定 layout 属性,对应的视图会被创建并且作为请求的默认返回数据. 在控制器中定义一个布局 class Us ...

  5. 【HDOJ】1204 糖果大战

    题目本身不难.类似于dp.f(i)表示手中现有i颗糖果赢的概率,则下一局赢的概率是p(1-q),下一局输的概率是q(1-p),下一句平手的概率是1-p(1-q)-q(1-p),平手包括两人均答对或答错 ...

  6. wzplayer2 for windows ActiveX 试用地址

    提供wzplayer2 for windows ActiveX,测试地址:http://www.coolradio.cn/IE.htm 大家使用时候必须允许未签名ActiveX下载和运行,否则将无法正 ...

  7. 【转】OS X Mavericks: 防止 Mac 进入睡眠 -- 不错

    原文网址:https://support.apple.com/kb/PH13808?locale=zh_CN&viewlocale=zh_CN 某些 Mac 电脑将在不活跃一段时间后自动进入睡 ...

  8. 从头开始编写一个Orchard网上商店模块(6) - 创建购物车服务和控制器

    原文地址: http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-pa ...

  9. JSP---JavaBean的使用-jsp:useBean标签相关

    JavaBean介绍: JavaBean其实就是一个遵循特定写法的java类,但是必须具有如下特点: 1.这个java类必须具有一个公开的无参构造函数 2.属性必须私有化,类必须公开 3.私有化的属性 ...

  10. 个性CMD设置方法(转载)

    原文地址http://wenku.baidu.com/link?url=DB8X-eHwE_VGtggBmKsBimdzXeGI_6Ga90W9PmX2Px2eUqdXOnq7FhEIzsqBfTqT ...