[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON
<!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的更多相关文章
- [Javascript] Webpack Loaders, Source Maps, and ES6
Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...
- 使用leaflet绘制geoJson中国边界
绘制中国边界 代码如下: function drawChina() { //设置样式 var myStyle = { "color": "#00f", &quo ...
- JavaScript Source Maps浅析
阅读目录 有用的链接 Link: 原文链接 译文开始: 对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩.但是当你需要调试这些压缩文件中的代码的时候,会发生什么?可能会是一场噩梦.但 ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- JavaScript资源大全中文版（Awesome最新版）
Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...
- Leaflet客户端学习笔记
Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...
- 如何实现通过Leaflet加载dwg格式的CAD图
前言 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...
- Google Maps API Web Services
原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...
- The tilde ( ~ ) operator in JavaScript
From the JavaScript Reference on MDC, ~ (Bitwise NOT) Performs the NOT operator on each bit. NOT a y ...
随机推荐
- 使用Eclipse调试Android Native Application－－－cocos2d-x ＋ Eclipse + Android + ndk
纠结很多天的ndk 调试, 终于在 mac 下面顺利完成(注意在windows还是没弄成功,蛋疼...) 调试方法: 1:先google, ndk demo . 把ndk 最基本的hellword ...
- 在Android手机上安装linux系统
在anroid手机中安装fedora系统.记住不只是教你安装fedora系统. 需要的备注与软件 1.一个已经root的Android手机,记住是root后的,root后的,root后的.(重要的事情 ...
- vs2012布局问题
问题背景: 北大青鸟ASP.Net视频中,老师提到可以通过更改属性PageLayout的值,来实现页面布局由默认的FlowLayout(流式布局)而成为GridLayout(网格布局),即系统控件安排 ...
- 如何查看自己运行ubuntu是32位还是64位
当安装ubuntu在pc上,不推荐在32位pc安装64位操作系统,64位pc安装32位操作系统 方法/步骤 按ctrl+shift+t 快捷键,打开终端,输入sudo uname --m ,按下ent ...
- linux设备驱动那点事儿之平台设备理论篇
一:Platform总线 1.1概述 一个现实的linux设备驱动通常需要挂接在一种总线上,对于本身依附于PCI,USB,IIC,SPI等的设备而言,这自然不是问题,但是在嵌入式系统里面,SOC系统中 ...
- poj炮兵阵地（状压）（25+10+20=55）
http://poj.org/problem?id=1185 刚开始思路就错了 想着用保存这一行的状态 然后再去枚举前面两行的状态 这样不能保证前面两行的状态同时满足要求 正解:保存两行的状态 再依次 ...
- 转：理解 Linux 的硬链接与软链接
Linux 的文件与目录 现代操作系统为解决信息能独立于进程之外被长期存储引入了文件,文件作为进程 创建信息的逻辑单元可被多个进程并发使用.在 UNIX 系统中,操作系统为磁盘上的文本与图像.鼠标与键 ...
- HOOK windows消息 C# 代码
Option Explicitprivate [DllImport("GAIS", SetLastError=true)] static extern long CallWindo ...
- oracle rac IP详解
rac环境下vip/public/private IP的区别 每个节点要2块网卡, 3个IP,虚拟IP或者叫做业务IP,单个网卡当掉可以“漂”到其他网卡是继续提供服务 在Oracle RAC环境下,每 ...
- codeforce 660D Number of Parallelograms
题意:询问多少个矩形. 统计横纵坐标差,放进vector中 #include<cstdio> #include<cstring> #include<iostream> ...