Jump to content

processwire and openlayers


yrglx
 Share

Recommended Posts

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.

result.thumb.PNG.bcab85a66153df3e464d7a25e024f799.PNG

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

actualresult..thumb.PNG.535b4f354e93bd2338cde123da04dab0.PNG

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?

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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"

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

Best wishes,
Steve

Link to comment
Share on other sites

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*.

Link to comment
Share on other sites

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.

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

Link to comment
Share on other sites

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.

 

mapJS.PNG

debugger.PNG

Link to comment
Share on other sites

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/...?

404-module-access.PNG

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...