Pro triggers navigation on map

[dhunink]

Hi,

I’ve added a interactive map on a page. It’s inserted as a Javascript ES-module, using the ArcGIS Javascript API. When I use the default WordPress Theme, the map displays perfectly and everything works as expected.
But as soon as I switch to Pro, the map recieves constantly thinks there is interaction, navigating the map upwards.

My question is not so much to provide me with a clean solution, I understand that’s not something I can expect from support. But I do hope om some help identifying which script and/or where the Pro theme fires user-like-actions that trigger map interaction. I know how to debug a lot, but not how to keep track of JS-interactions / events like this.
The liver example is found here.

Thanks for every advice!

[ruenel]

Hello @dhunink,

Thanks for writing in! There seems to be a conflict between the theme and the JS code you have inserted. Can you please share the JS code so that we can also test it on our local testing server? We want to investigate this issue further.

Best Regards.

[dhunink]

Hi @ruenel,

thanks for following this up. There indeed seems to be a conflict, and although I’m quite experienced in debugging JS, this one is above my head. So I’m thankful the team wants to investigate this further!

As stated, it’s Javascript that runs as an ES-module so it’s included through functions.php:

add_action('wp_enqueue_scripts', 'dev_enqueue_topotrainer');
function dev_enqueue_topotrainer() {
        wp_enqueue_script('dev-topotrainer-es-js', get_template_directory_uri().'-child/topotrainer-es-debug.js', array( 'jquery' ), '0.0.1',array('strategy'  => 'defer', 'in_footer'=>true));
}

/**
 *Script that import modules must use a script tag with type="module", 
 * so let's set it for the script.
 */
add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
	if($handle == 'dev-topotrainer-es-js') {
        $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
	};
    return $tag;
}, 10, 3 );

The ‘dev-topotrainer-es-js.js’ file:

import esriConfig from "https://js.arcgis.com/4.27/@arcgis/core/config.js";
import Map from "https://js.arcgis.com/4.27/@arcgis/core/Map.js";
import MapView from 'https://js.arcgis.com/4.27/@arcgis/core/views/MapView.js';
import TileLayer from "https://js.arcgis.com/4.27/@arcgis/core/layers/TileLayer.js";
import FeatureLayer from "https://js.arcgis.com/4.27/@arcgis/core/layers/FeatureLayer.js";
import Expand from "https://js.arcgis.com/4.27/@arcgis/core/widgets/Expand.js";
import Legend from "https://js.arcgis.com/4.27/@arcgis/core/widgets/Legend.js";

/*
* Configuration
*/
const nameSpace = 'tpgrf';
esriConfig.apiKey = "SEE THE SECURE NOTE";
	
const basemapLayer = new TileLayer({
 url:"https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Topografie_in_de_klas_nederland_ondergrond/MapServer"
});

const contentLayer = new FeatureLayer({
    url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Topografie_in_de_klas_nederland/FeatureServer/0"
});

const highlightLayer = new FeatureLayer({
    url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Topografie_in_de_klas_nederland/FeatureServer/1"
});

	
/*
* Build map and view
*/
const map = new Map({
    basemap: "arcgis-topographic", // Basemap 
});

const view = new MapView({
    map: map,
    container: "viewDiv", // Div element
});

I’m very curious where you find the ArcGIS Javascript API imported as an ES-module is interfering with Pro/Cornerstone. Any insights would be much appreciated; I’m trying to convert a very successful non-profit website into a cornerstone-drive website, but that will only work if I can use the ArcGIS Javascript API

[marc_a]

Hey @dhunink,

It would also be best if you could share with us your admin credentials so that we can check the result when activating the Pro theme and default WordPress theme. That being said, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[dhunink]

Hi @marc_a,
more then happy to do. It’s a dev environment, so feel free to experiment.
I’ll add details to the previous secure note.
Hopefully there’s an easy fix for this. It would be so awesome to replace my custom made theme with Pro!

[charlie]

Hello,

You need to set a height for the div that places a canvas inside it. I set it as 500px and it looks like your in business now. This is a common canvas quirk where a canvas inside an “auto” div will constantly keep resizing. As it continues to increase the height of its parent container. Have a great day

[dhunink]

Hi @charlie,

thanks for chipping in. That really is a great step forward, thanks for that!
What I’m hoping to achieve in the end is the map being full height minus the header, across every device. The header uses 8em. So I changed the height to calc(100%-8em). But that brings the initial behavior back.
Any suggestion on how to make the map-div + header to a screen filling view?

In addition: setting a fixed height works on the fronted, but inside the Cornerstone Editor, the map won’t display. I want to add some Cornerstone Elements to the map-Div, so it would be more then convent to preview all in the editor. Any thoughts on why the Cornerstone Editor won’t preview the map div?

Thanks for getting back so quickly!