auarstadtt Posted August 4 Share Posted August 4 Hi everybody, I'm new to carafe but I manage tomake it working with geocoding and webviewer mapping. This tool is so great. Do you know where to find help for advance features like : default zoom level ? markers different images ? I've looked into the scripts but the html code is soo big that I can not find the specific portion .. thank you Antoine Link to comment Share on other sites More sharing options...
mkos Posted August 5 Share Posted August 5 Hi Antoine, You can set the zoom level when initializing the map object by adding a zoom property like this: map = new google.maps.Map(document.getElementById("map"), { zoom: 8, }); You can set the marker icon when initializing the marker object by adding an icon property like this: const svgMarker = { path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(15, 30), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); You can also use the setter function to set the property after the object has been initialized. For example: marker.setIcon(svgMarker); Same for the zoom setting: map.setZoom(8); Reference: Zoom: https://developers.google.com/maps/documentation/javascript/interaction#javascript Marker: https://developers.google.com/maps/documentation/javascript/markers#icons Link to comment Share on other sites More sharing options...
auarstadtt Posted August 5 Author Share Posted August 5 Thank you for the reply. I managed to do that in the js code if I use a code html & js into the web viewer and not carafe. but I don t know where to use this code into carafe map add on ? Link to comment Share on other sites More sharing options...
mkos Posted August 5 Share Posted August 5 You would need to make those updates in the template.carafe file. That's where the htmls+js code lives in carafe bundles. Link to comment Share on other sites More sharing options...
auarstadtt Posted August 5 Author Share Posted August 5 Sorry for my stupid question but where is it ? In my extension folder/carafe i have a template.xml And it's not there where the modifies can change for everybody. thank you Link to comment Share on other sites More sharing options...
mkos Posted August 7 Share Posted August 7 You'll need to edit the original bundle files, in particular the template.carafe file, and then deploy the updated bundle to your solution. Take a look at the tutorials at https://carafe.fm/tutorials/. I haven't watched them all myself, but my guess is that the following videos might be helpful: Anatomy of, Configure, Deploy, Advanced Dev parts 1 & 2. Something to keep in mind: There are two versions of Carafe. There's the original, which is now called Carafe Kitchen. The newer one uses the newer FileMaker add-on capabilities. I think the videos were recorded with Carafe Kitchen. Link to comment Share on other sites More sharing options...
auarstadtt Posted August 7 Author Share Posted August 7 thank you it's true I use carafe add on with other config than the videos. I already watched them. Link to comment Share on other sites More sharing options...
mkos Posted August 7 Share Posted August 7 You can export the bundle you're using so that you can modify it. To do this, find your bundle in the Carafe Configurator layout, go to the bundle details, and click the button to export the bundle. This will create a single json file which will include all the source code. You can then use the Carafe Bundler utility to convert that json file into multiple individual source files (including template.carafe). Look for the "To work on an existing Bundle..." text to find the instructions for doing that. As you make changes, you can preview them in your browser. Run npm run watch to enable that. This will also hot-reload the bundle in the browser as you make changes. This way you can see those changes take effect immediately. To compile the source files back into a single json bundle and send it to FileMaker, update the 'sendFmpUrl' property in the package.json file, and then run npm run force-send. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now