Giter Club home page Giter Club logo

Comments (19)

pmacMaps avatar pmacMaps commented on June 3, 2024 1

I'm going to test the basic map you proposed. On a side note, I'm developing an embedded map on a Drupal 7.54 site, and I ran into the same issue where the point feature layer won't show up unless I remove the Esri Leaflet Renderers plugin.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

not sure its the culprit, but you're not loading the same feature service in the app that works..

//working
'//gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/CountySitesData/MapServer/1'
// not working
'//gis.ccpa.net/arcgiswebadaptor/rest/services/ArcGIS_Online/SeniorCommunityCentersData/MapServer/0'

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

I tested removing the renderers plugin in both examples, and it solved the problem both times. If it helps, I can create duplicate maps where the only difference is renders being in/out.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

i believe you.
does it make any difference if you skip specifying a custom pane in the layer constructor?

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

No. I tested not creating a custom pane and the layer still did not draw. On a separate note, I had to create the custom pane so the popups would work. Before adding the pane, the popup wouldn't open once I zoomed the map in. I am thinking of creating an issue in Esri Leaflet, unless you're already aware of that.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

what about something as simple as this?

var center = [40.15, -77.25];
var map = L.map('map').setView(center, 10);

var myIcon = L.icon({
  iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAMxJREFUOI3t0LEKglAUxvF/EQmBFPUAQUM4VBi0JQ5uQRAtvkPv0GO0OjQF7U5RY7SYQTgk5FbvIBQ0aTglXYuGvul+cO6PwynwoRSih8rAbdK+ioJnPNnB1mO4z7CqM1ZF4bW08JzQfm6cdf7wj8B3brhsCPBQ6NFCI09OHN5iM2MS9ylL2mji8Ildogccs4EbdIF53OsoL/+kgjVGAAQcaKHRQc8GLiJhYGJgphlPD7+TP/xF2GdfKSELg5fQryXgFVZ5hSUMR/nYKR7ypCcM24lKGgAAAABJRU5ErkJggg==',
});

L.marker(center, {
  icon: myIcon 
}).addTo(map);

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

I was planning on using the L.icon as a work around. But I still wanted to make Esri aware of this quirk. It is quite possible our CMS is interfering with the plugin, but at least now it's documented.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

i didnt mean to suggest using L.icon as a workaround, but rather as a minimal repro case to try and help pinpoint more closely where exactly things are breaking down.

  1. are you able to view the icon in your CMS?
  2. if so are you still able to see if if you also display a basemap?
  3. if so, are you still able to see it after you add the county outline?

my guess is that the problem has to do with the z-index work in Leaflet 1.x to do with panes. so taking a close look at how things are stacked in the DOM would probably be a good idea.

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

@jgravois I have an update:

  1. I was able to test your code above, and the point appeared. When I added a basemap to the mix (OSM), the point still showed up.
  2. Whenever I used a *geojson file as the data source, the features showed up. This was the case with our CivicPlus CMS and the Drupal 7.54 site.

I'm not sure what the next steps are for diagnosing the issue, but I can help if need be. Because I'd like to get my upgrades finished, I'm going to remove the Renderers plugin and symbolize my points using a L.Icon. To me, it seems like the plugin is not playing nicely with CMSes for at least Point data (haven't tested Polygon data, and a Polyline data works).

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

thanks for doing the additional testing. i'll see if i can set up a drupal instance to test on my side.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

How exactly are you embedding your custom <html> and .js into Drupal and CivicPlus?

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

Drupal

  1. Add a <div="membershipMap"> element within the page editor widget for node 8.
  2. Within template.php in the ./sites/all/themes/[theme] directory:
  3. within the _[theme]preprocess_node() function, call drupal_add_css and drupal_add_js within a if (drupal_get_path_alias("node/8")) conditional statement

CivicPlus

Within the page editor, I add two Custom HTML widgets. The first loads the various css and js files. the second contains the div with the custom id for the map, and the js file(s) for the map. I've included some screen shots:
civicplus-customhtml-1
civicplus-customhtml-2

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

thanks for humoring me @pmacMaps

i was able to get a repo case set up locally by following the steps below

  1. ran a MAMP drupal installation
  2. created a 'basic page'
  3. allowed 'full html'
  4. copied our generic renderers sample and tweaked the div height/width

(i tried using Acquia previously and they make it a bit tougher to pass in raw html)

i still haven't figured out how to solve the problem, but now i can see that the reason the symbols aren't displaying is because some sort of .css conflict is squashing the border and padding for each embedded image down to 0px.

screenshot 2017-05-26 13 01 52

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

i'm still scratching my head here, but you can solve this problem by utilizing the appropriate default pane associated with point geometries

L.esri.featureLayer({
  url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/DamageAssessment/MapServer/0',
  pane: 'markerPane'
}).addTo(map);

i'm going to propose a small change here to make sure that the appropriate pane is set automatically, but this still doesn't explain why both overlayPane and any other custom pane you create are squashing inline images.

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

Using markerPane with the Renderers plugin resolves the issue for me. I'm okay with closing this issue, as we've found a solution.

from esri-leaflet-renderers.

jgravois avatar jgravois commented on June 3, 2024

since we still haven't gotten to the root of the problem, lets just keep it open.

that said, since in the next release it won't be necessary to specify the markerPane manually, and you have what you need for now, its definitely on the back 🔥 .

from esri-leaflet-renderers.

jwasilgeo avatar jwasilgeo commented on June 3, 2024

Hi @pmacMaps! Any updates or thoughts with this oldie? 😃

from esri-leaflet-renderers.

pmacMaps avatar pmacMaps commented on June 3, 2024

No, I just used the panes solution proposed by @jgravois. We can close this, but the underlying issue, whatever it may be, might still exist.

from esri-leaflet-renderers.

jwasilgeo avatar jwasilgeo commented on June 3, 2024

Thanks for the follow up. Let's close it for now as there is quite a bit of good info in the conversation above and then reopen/revisit should anyone get back into figuring out what else was making this occur.

from esri-leaflet-renderers.

Related Issues (20)

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.