Coder Social home page Coder Social logo

esri / esri-leaflet-renderers Goto Github PK

View Code? Open in Web Editor NEW
51.0 15.0 32.0 1.1 MB

Plugin for Esri Leaflet to use drawing information defined in the feature service

JavaScript 62.75% HTML 34.18% CSS 1.68% Shell 1.39%
arcgis esri esri-leaflet javascript leaflet-plugin leaflet-plugins web-development

esri-leaflet-renderers's Introduction

This repository has been archived. If you're an active user, please feel free to fork it.

Esri Leaflet Renderers

Leaflet plugin for ArcGIS Feature Services. Esri Leaflet Renderers works in conjunction with the Esri Leaflet Plugin to draw feature services using renderers defined by the service.

travis

The sole purpose of this plugin is to allow L.esri.FeatureLayer to automatically take on renderers defined in ArcGIS Feature Services. Esri Leaflet Renderers works in conjunction with Esri Leaflet, but it does not add any additional methods or properties to the class that it extends.

Example

Take a look at the live demo.

You can also find a side by side comparison of the ArcGIS API for JavaScript here.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Renderer from Service</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3"></script>

    <!-- Load Esri Leaflet Renderers -->
    <!-- This will hook into Esri Leaflet to get renderer info when adding a feature layer -->
    <script src="https://unpkg.com/esri-leaflet-renderers@3"></script>

    <style>
      body {margin:0;padding:0;}
      #map {position: absolute;top:0;bottom:0;right:0;left:0;}
    </style>
  </head>
  <body>

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

    <script>
      var map = L.map('map').setView([37.837, -122.479], 6);
      L.esri.basemapLayer('Streets').addTo(map);

      // this plugin will get the predefined renderer from the layer's drawing info at:
      // https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0
      // use that renderer to style the polygons drawn on the map
      L.esri.featureLayer({
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0'
      }).addTo(map);
    </script>

  </body>
</html>

Development Instructions

  1. Fork and clone Esri Leaflet Renderers
  2. cd into the esri-leaflet-renderers folder
  3. Install the dependencies with npm install
  4. Run npm start from the command line. This will compile minified source in a brand new dist directory, launch a tiny web server and begin watching the raw source for changes.
  5. Run npm test to make sure you haven't introduced a new 'feature' accidentally.
  6. Make your changes and create a pull request

Limitations

  • As of 2.0.1, It is possible to override aspects of polyline and polygon symbology defined by the service in the FeatureLayer constructor. For points, it is not.
  • Simple Marker symbols do not support rotation (ie: the 'angle' property is ignored).
  • Polygons only support solid fill. This does not include advanced fill types like PictureFill, Backward Diagonal, DiagonalCross, etc.
  • Text symbols are not supported.

Dependencies

  • Esri Leaflet Renderers 1.x (available on CDN) can be used in apps alongside:

  • Esri Leaflet Renderers 2.x (available on CDN) can be used in apps alongside:

  • Esri Leaflet Renderers 3.x (available on CDN) can be used in apps alongside:

Versioning

For transparency into the release cycle and in striving to maintain backward compatibility, Esri Leaflet is maintained under the Semantic Versioning guidelines and will adhere to these rules whenever possible.

Releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

  • Breaking backward compatibility bumps the major while resetting minor and patch
  • New additions without breaking backward compatibility bumps the minor while resetting the patch
  • Bug fixes and misc changes bumps only the patch

For more information on SemVer, please visit http://semver.org/.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright © 2015-2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.

esri-leaflet-renderers's People

Contributors

bviswanathan avatar dependabot[bot] avatar dpraimeyuu avatar gavinr avatar gavinr-maps avatar jgravois avatar kneemer avatar main-kun avatar manders avatar patrickarlt avatar pbastia avatar saulzi avatar tomwayson avatar ungoldman avatar ynunokawa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

esri-leaflet-renderers's Issues

Building from source files fails

Steps to repro:

  • Fork and Clone the repo.
  • npm install to install the dependencies
  • Run grunt
  • It will fail in karma task with the below error:
    image

Support layer transparency

Currently, only transparency set on individual symbols is used. Would be nice to support transparency set at the feature service level, like this

{
"renderer": { "..." },
"transparency": 50
}

1.0.0 / 2.0.0 release steps

to do (in order)

  • test/merge support for unique value renderers based on more than one field
  • tag 1.0.0
  • PR to jsdelivr
  • refactor Leaflet.ShapeMarkers
  • merge #72
  • merge 2.0.0 into master?
  • tag 2.0.0-beta.1
  • hook up travis continuous testing

add support for unique value renderers based on more than one field

in general, multi-field unique value renderers just allow the service to define different permutations of unique combinations of the attributes associated with a particular feature in two (or three) fields as opposed to just looking at one. the choice of delimiter used to separate individual values is configurable.

for example a feature like this:

{
  "geometry": {},
  "properties": {
    "name": "somestring",
    "type": "cool"
  }
}

with the default field delimiter , would be appropriately symbolized in a renderer expressed as:

"type": "uniqueValue",
"field1": "name",
"field2": "type",
"field3": null,
"fieldDelimiter": ",",
"uniqueValueInfos": [{
  "symbol": { ... },
  "value": "somestring,cool"
}]

i'm not sure if/where documentation on this exists, but i'm pretty comfortable with the pattern so i'd be more than happy to chat about it in more depth to provide more clarification if it'd be helpful.

create first tagged release

it'd be beneficial to:

  1. update the package.json with a version number (perhaps v0.0.1-alpha.1 to match convention of geocoder?)
  2. create a tagged release.
  3. create a changelog indicating the minimum esri leaflet version necessary for compatibility.
  4. update the package.json again (v0.0.1-alpha.2)

Race condition in 2.0.0-beta.7

Hi all,

I'm seeing a race condition, where if map updates occur while a feature layer is loading, the layer accesses some variables which have not been initialized yet and crashes.

I've reproduced the problem a gist. A feature layer is loaded and unloaded at 5 second intervals, and the crash occurs when we call map.setZoom.

Not 100% sure this is from esri-leaflet-renderers, but the exception no longer occurs if you comment the line importing renderers in the gist.

Thanks!

Edited to add: For some context, we are using react-leaflet. React has asynchronous event systems which operate in the background, with the result that we encounter this issue reliably in our app. I didn't go hunting for obscure race conditions at random.

[leaflet-1.0] npm install fails if jake isn't installed globally

Trying out the leaflet-1.0 branch to use spec/comparisons.html, I noticed the following error popped up when running npm install on a machine where jake is not installed globally:

Error: Command failed: /bin/sh: jake: command not found

/bin/sh: jake: command not found

The rest of the install runs fine (this doesn't appear to halt anything), and I can view spec/comparisons.html, but it's a little weird so I thought I'd report it.

/cc @kneemer

Setting opacity does not work as expected on feature layer if you set it with setStyle after some features have loaded

Hello again!

I'm having an issue with setting opacity after the layer has been added to the map. I add the feature layer, and then afterwards set the opacity with setStyle. The features that have loaded are using the published symbology w/ opacity, but new features to load use the default leaflet symbology w/ opacity. The expected behaviour is for all of the features to have the service defined symbology w/ opacity.

Fiddle. Auto pan and set opacity after 3 seconds

Image

outline width of 0 in service not honored

not reproducible when i publish my misbehaving .shp as a hosted feature service (because data is copied), so i'll have to take another crack at spinning up a public AWS machine soon.

screenshot 2015-09-08 11 00 17

problems

#52 broke renderering of this unique value renderer (no default symbol) service. i stepped through the code and am temporarily stumped as to how.

on a side note, it doesn't look like we ever interpreted the supplied transparency correctly.

add option for individual L.esri.featureLayers to not pick up renderer defined in service

talked to a developer yesterday who said it would be helpful if he could only invoke this plugin for some of the layers in his map.

seems to me like it would be easy enough to add a check for a new constructor option in addInitHook() and abort if useRenderer != true.

if (this.options.useRenderer)
  // proceed

curious to hear other thoughts. i think this is the first thing that gets us into territory of needing additional API doc specific to the plugin...

Pull markers out into separate repo/plugin

The markers could be reused by anyone wanting to use one of the Esri marker types; Square, Cross, X or Diamond. They should get their own space and pulled into this plugin when building.

@patrickarlt do you have any opinions on naming or structure of the plugin? esri-leaflet-markers, esri-markers?

add support for text symbols

I've successfully integrated esri-leaflet-renders, as a result instead of the 'common' marker I see the correct symbol described in the drawing info. However, I can't see the label above the symbol.
Are labeling info supported ?

The one I'm using is defined as:

Labeling Info:
    Label Placement: esriServerPointLabelPlacementAboveRight 
    Label Expression: [IDENTIFICATIVO] 
    Use Coded Values: false 
    Symbol:
        Color: [255, 0, 0, 255] 
        Background Color: N/A 
        Outline Color: N/A 
        Vertical Alignment: bottom 
        Horizontal Alignment: center 
        Right to Left: false 
        Angle: 0 
        XOffset: 0
        YOffset: 0
        Size: 9 
        Font Family: Arial 
        Font Style: normal 
        Font Weight: bold 
        Font Decoration: none 
        Min. Scale: 15000.0 
        Max. Scale: 0.0 

plugin could/should set min/maxZoom defined in service metadata automatically

STR:
add this url as a FeatureLayer to comparisons.html.

notice that Esri Leaflet draws the graphics at all scale ranges, while it is neccessary to zoom in past 1:150000 in the sample JSAPI app.

support for setting min/maxZoom programmatically was added to core recently. i think it'd be cool if this plugin set the appropriate properties dynamically.

let me know if you agree. if so, i'm happy to tackle.

Supporting renderer from ArcGIS.com Feature layer item

There are 2 types of feature services:

  • Hosted feature services: You have a layer in ArcGIS Desktop or any JS API app, set the renderer on it and publish it using your ArcGIS.com account. Renderer is set on the service and the plugin renders it fine.
  • Feature services: You have published a layer already to your server and want to add that layer to ArcGIS.com, apply the renderer (using smart mapping) in ArcGIS.com and save the layer to your user account. In this case, the renderer set on the item takes precedence over the renderer available from the service. I am able to access the renderer from the item, but Esri Leaflet Renderer defaults to the one in the service.

Question: Is there a way that I can force the Esri Leaflet Renderer’s layer.metadata call to use my own renderer instead of one from the service?

setWhere callback is not called

Changing the where condition on a newly created layer doesn't let the callback to be executed.
see http://jsbin.com/qonevevojo/edit?html,console,output
While the callback is correctly executed if the setWhere is executed after a few seconds.
Looking at the code, this seems to happen because oldOnAdd (https://github.com/Esri/esri-leaflet-renderers/blob/master/src/FeatureLayerHook.js#L27) is called only when metadata returns. By doing this in FeatureManager setWhere this._activeCells (https://github.com/Esri/esri-leaflet/blob/2cf1b3b375f38a174b9b48544dfbffd2320031e4/src/Layers/FeatureLayer/FeatureManager.js#L242) is undefined when setWhere is called too soon (before metadata has returned).

Enriched layer not rendering points

The Aggregation of Trimet Stops to Portland Neighborhoods layer is not rendering properly, only the polygons are rendering. Working on it now.

API + Usage Doc

Love the concept. Please add docs. Currently lots of code deciphering is needed to figure it out.

Breaking changes from Leaflet 2.0/Esri Leaflet 2.0

@jgravois @kneemer I've been going through the changes to get Esri Leaflet ready for 1.0 2.0 and I've made some API changes in Esri Leaflet.

The biggest change is the removal of the special handling for L.CircleMarker that @jgravois added for the last release. This ended up causing a HUGE number of problems. After a pretty close reading of the Leaflet code we should do the following if we want to use markers based on L.Path like L.CircleMarker.

L.esri.featureLayer('http://gis.example.com/mock/arcgis/rest/services/MockService/MockFeatureServer/0', {
      pointToLayer: function(feature, latlng){
        return L.circleMarker(latlng);
      },
      style: function () {
        return {
          color: 'green'
        };
      }
    }).addTo(map);

This code actually works in the current version of Esri Leaflet. pointToLayer should be used ONLY to convert the latlng into some kind of marker object. If you are using L.Marker you can style it here but for anything that inherits from L.Path you should style it using the style option.

Demo comparison app: could the Esri JSAPI map make use of custom navigation animations?

Question/enhancement request:

First of all, awesome work all around with Esri/esri-leaflet and Esri/esri-leaflet-renderers. Regarding the comparison app, I was wondering if the JSAPI map could incorporate custom pan and zoom duration/rates, as in this JSAPI sample. I've found that something roughly approximate to the following values gives the Esri map similar pan and zoom speeds as the Leaflet map.

esriConfig.defaults.map.panDuration = 250;
esriConfig.defaults.map.panRate = 1;
esriConfig.defaults.map.zoomDuration = 250;
esriConfig.defaults.map.zoomRate = 1;

Thoughts?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.