<!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. HTML控件ID和NAME属性的区别，以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值

    在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号. name是用来提交数据的,提供给表单用,可以重复: id则针对文档操作时候用,不能重复.如:document ...

  2. easyui源码翻译1.32--TreeGrid（树形表格）

    前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...

  3. Android 关于HttpClient上传中文乱码的解决办法

    使用过HttpClient的人都知道可以通过addTextBody方法来添加要上传的文本信息,但是,如果要上传中文的话,或还有中文名称的文件会出现乱码的问题,解决办法其实很简单: 第一步:设置Mult ...

  4. misc_register、 register_chrdev 的区别总结

    参考: http://longer.spaces.eepw.com.cn/articles/article/item/60415 http://imganquan.org/blog/?p=350 网上 ...

  5. 【HDOJ】1238 Substrings

    深搜+剪枝,简单字符串. #include <stdio.h> #include <string.h> #define MAXLEN 105 #define MAXNUM 10 ...

  6. Android开发UI之常用控件的使用

    1.日期选择控件 DatePickerDialog 代码: btnChooseDate=(Button) findViewById(R.id.btnChooseDate); btnChooseDate ...

  7. 360手机助手内部资料曝光，63张PPT纯干货

    360手机助手内部资料曝光,63张PPT纯干货 日前,国内最大的安卓应用商店360手机助手发布了<2016年手机软件行业趋势绿皮书>,这份绿皮书对2015年以来移动互联网的趋势做了总结,展 ...

  8. mapreduce: InputFormat详解 -- RecordReader篇

    InputFormat是MapReduce中一个很常用的概念,它在程序的运行中到底起到了什么作用呢? InputFormat其实是一个接口,包含了两个方法: public interface Inpu ...

  9. SAE网站搭建（1）

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

  10. C# 中判断程序是否启动使用Mutex使用异常

    [背景] 在最近的一个项目中,我负责客户端模块的工作.需求要求,在启动客户端时需要判断客户端是否已经启动(单例).于是我决定使用Mutex来实现此功能,代码如下: bool initiallyOwne ...