processwire and openlayers

[yrglx]

I have an existing processwire website. A copy of that is running on my local machine. I have another local website running the openlayers workshop that I adapted to my needs (openlayers.org/) (workshop). That's how the website with the adapted workshop data looks like.

I want to add that openlayers map in the processwire website. But here is the result: a black hole! ;-(

I have googled for hours but have not found anything usable.

Is there something special I need to know to add an openlayers map in a php CMS?

 

[dragan]

Hello @yrglx and welcome to the forum.

I have never used OL myself, but PW simply doesn't care what you put in your frontend-templates.

Does OL require an API key like Googlemaps? If yes, then this is usually restricted to a certain domain.

Do you see any JS errors in the browser console? Are you sure your CSS + JS paths are correct?

[yrglx]

32 minutes ago, dragan said:

Hello @yrglx and welcome to the forum.

I have never used OL myself, but PW simply doesn't care what you put in your frontend-templates.

Does OL require an API key like Googlemaps? If yes, then this is usually restricted to a certain domain.

Do you see any JS errors in the browser console? Are you sure your CSS + JS paths are correct?

Hi Dragan, thanks for the quick answer. No, afaik, openlayers does not require an API key like Googlemaps. In Firefox every now and then I see the following error:

Quote

TypeError: Error resolving module specifier: ol/ol.css

But I might reload the page and the error is gone, even when Clearing the Cache. When I use autocompletion for the Import Statement in my map.js, it'll find the file. But when loading the Webpage it might say

Quote

TypeError: Error resolving module specifier: node_modules/ol/format/GeoJSON

And it seems that I need to define the JS script as a module

<script type="module" src="<?php echo $config->urls->templates ?>scripts/map.js"></script>

To me it seems right now, that there is a mismatch between the IDE (phpstorm) using autocompletion for the path to the source and processwire loading the source on the Client. Any Suggestion?

[yrglx]

47 minutes ago, dragan said:

Hello @yrglx and welcome to the forum.

I have never used OL myself, but PW simply doesn't care what you put in your frontend-templates.

Does OL require an API key like Googlemaps? If yes, then this is usually restricted to a certain domain.

Do you see any JS errors in the browser console? Are you sure your CSS + JS paths are correct?

One more thing: the map.js content is exactly the same as in the workshop website that is running correctly...

[dragan]

To me it looks strange that you upload the node_modules folder to the server.

I assume you have a dev and a build/dist task, no? Usually you create a build version and only upload the final/minified assets. But I don't know how your frontend-setup looks like...

[netcarver]

Hello @yrglx

Welcome to the forums. A couple of things come to mind...

• Have you got any script or adblockers running in your browser? I've had these prevent maps from working properly in my PW sites before. I suggest you disable any blockers on your domain, clear your browser cache and try reloading.

8 minutes ago, yrglx said:

script type="module"

• Does this help?

If I think of anything else, I'll post it.

Best wishes,
Steve

[yrglx]

1 hour ago, dragan said:

To me it looks strange that you upload the node_modules folder to the server.

I assume you have a dev and a build/dist task, no? Usually you create a build version and only upload the final/minified assets. But I don't know how your frontend-setup looks like...

For now I am trying to have the map showing on the local machine, no server *stuff*.

[yrglx]

1 hour ago, netcarver said:

Hello @yrglx

Welcome to the forums. A couple of things come to mind...

• Have you got any script or adblockers running in your browser? I've had these prevent maps from working properly in my PW sites before. I suggest you disable any blockers on your domain, clear your browser cache and try reloading.

• Does this help?

If I think of anything else, I'll post it.

Best wishes,
Steve

Hi Steve,

thanks!

I wouldn't know of any scripts or adblockers running in my browser...

I cleared the browser cache about a 1000 times ?

About the stackoverflow question: I test in firefox.

What seems weird to me is that if I install the workshop example (which does not work with PHP, only with plain HTML and JS) if works fine. But if I copy the HTML snippets and the JS file to processwire (and I assume I do that correctly) it does not work. There seems to be an issue with PHP (to which I am a total newbie).

Here are the 3 files to install on a local machine in the downloaded "openlayers-workshop-en.zip ".

The workshop tutorial can be found here.

If anyone gets it to run in processwire -> congrats!

kantone.geojson

index.html

main.js

[dragan]

Are you familiar at all with PW? I mean, do you know how templates, pages and fields work?

It seems you just upload everything in a certain folder, and use .html instead of .php.

Here are the basics: https://processwire.com/api/templates/

 

[yrglx]

6 minutes ago, dragan said:

Are you familiar at all with PW? I mean, do you know how templates, pages and fields work?

It seems you just upload everything in a certain folder, and use .html instead of .php.

Here are the basics: https://processwire.com/api/templates/

 

Thanks.

Yes, I am newbie to pw and PHP but I do understand the basics.

To me, if I use (I do hardcoding just for testing) the same HTML snippet and the same JS file on a page in PW as I do in the openlayers workshop, *it should* work, right? To the browser it should look the same.

My output as HTML code is the same and the script is loaded, but NOT executed, which is what I don't understand.

What might be of help, is that the map.js does not appear in the list of loaded JS but if I click on it in the HTML inspector I get exactly the same file as in my IDE.

 

[netcarver]

Any resources showing as not loading in the network analysis tab? Any errors in the console tab?

[yrglx]

11 minutes ago, netcarver said:

Any resources showing as not loading in the network analysis tab? Any errors in the console tab?

Nope, all show a status 200...

What is weird though, is that when I am logged in as an 'admin' and I load the requested page, I get a list of 404 messages in the admin-backend (how do you call that?). Do I need to give read access to those folders, i.e. node_modules/...?

[dragan]

Is node_modules in the site's root directory? If yes, move it somewhere in site/templates/ and adjust the path(s) in your JS script(s).

If this is really at the root level, PW's .htaccess mod_rewrite will instead search for a parent page node_modules and a child page ol and a page OSM ?

[yrglx]

4 hours ago, dragan said:

Is node_modules in the site's root directory? If yes, move it somewhere in site/templates/ and adjust the path(s) in your JS script(s).

If this is really at the root level, PW's .htaccess mod_rewrite will instead search for a parent page node_modules and a child page ol and a page OSM ?

Yes, node_modules is at the same level as site...

I'll try this on Monday... I'll post an update!

Thanks!

[bernhard]

hi @yrglx just copy&paste the code from the quickstart to your _main.php file (if you are using the default profile) or your template file (like home.php):

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

You'll see that this will work. Then you can continue replacing part after part and see where it starts to break.

[yrglx]

On 8/25/2018 at 5:23 PM, bernhard said:

hi @yrglx just copy&paste the code from the quickstart to your _main.php file (if you are using the default profile) or your template file (like home.php):

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

You'll see that this will work. Then you can continue replacing part after part and see where it starts to break.

thanks bernhard!

Now, it works! I had issues with the path to the geojson file ! How would you debug, if there is no error message in the log?

[dragan]

On 8/24/2018 at 5:20 PM, yrglx said:

What is weird though, is that when I am logged in as an 'admin' and I load the requested page, I get a list of 404 messages in the admin-backend (

What do you mean? You HAD error messages. And I'm sure also in your browser JS console.